Need help on 3 column layout theme

Jazzman · July 2006

I'm working on this 3-column layout. Quite easy. It displays the Panel Links on the left, and the Panel Strings on the right.

So far I got it working in Firefox:

But I can't get it to work in IE.

I have added the following CSS:


#Body {
	position: relative;
	}

#Panel.PanelLeft {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 201px;
	padding-left: 18px;
	}
#Panel.PanelRight {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 220px;
	}

#Content {
	margin:0px 235px 0px 235px;
	}

Check it out at: http://www.jazzman.nl/forum

Anyone got an idea?

Evdawg · July 2006

have you implemented the box model hack? ps. try making the width of the left panel 220px as well

WallPhone · July 2006

I.E doesn't (always) like absolutely positioned elements when using right or bottom. You may want to try to float PanelRight.

Or do like I did and hack with a IE only feature:

#Panel.PanelRight {
 position: absolute;
 top: 0px;
 right: 0px;  /* Firefox positioning */
 Left: expression(document.body.clientWidth-220);  /* Propritary IE positioning */
 width: 220px;
}

Evdawg · July 2006

Jazzman, since you seem to be a theme/style/extension making MACHINE, I installed Wine and IE6 just so I could debug this CSS, because I really appreciate all the work you have put into Vanilla and the community.

This seems to work: (screenshot)


#Panel * {
	margin:0px;
	padding:0px;
	list-style:none;
	}

.PanelLeft {
position: absolute;
left:18px;
width:201px;
	}

#Panel.PanelRight {
position: absolute;
top:0px;
right:0px;
width:220px;
	}

Make sure those are IN THAT ORDER, because it seems to make a difference.

and then finally, replace what's currently in the #content with this:


#Content {
padding-left:235px;
margin-right:235px;
}

It's ugly code, I know. But it seems to work. Hope I helped, and keep up the great work jazzman!

tthmaz · July 2006

Evdawg, i think u look more like a theme/style making machine to me, going as far as installing Wine and IE6 just to debug this CSS... good spirit there!

Wanderer · July 2006

It works well in Safari, except the search page has the Advanced link overlapping the Guest welcome message.

Jazzman · August 2006

@Evdawg: Thanks

It now works on Firefix and IE.. dunno about other browsers

Maybe Wanderer can check again. Oh, and yes, I haven't styled any other stuff, so the advanced link is still in the wrong position.

garvin · August 2006

Any chance you will make it possible that the administrator can decide what content will go in which column?

Jazzman · August 2006

You only have to change the included theme.php: just switch "PanelLeft" and "PanelRight" class and your done

spinsaround · August 2006

Sorry can you please explain again how you get items into the right column? Thanks

Need help on 3 column layout theme

Comments