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