Need help with positioning elements for IE6

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

tesker@interdyne.com - 22 Jul 2008 23:49 GMT

I'm working on a website that looks great in Firefox, IE 7 and IE 8 ,
but in IE 6 one of the elements appears below another element instead
of to the right where it is supposed to be. The site is at
http://www.indppc.com/. The main stylesheet is at
http://indppc.com/templates/transparent_bliss_1.5/css/template.css and
I'm detecting if the browser is IE6 and inserting CSS specific to IE6
at http://indppc.com/templates/transparent_bliss_1.5/css/template-ie6.css.
In summary, I have three elements:

<div id="leftwrap">
</div>

<div id="topbannerad" align="top">
</div>

<div id="right">
</div>

With CSS:
#leftwrap{
float: left;
}

#topbannerad{
z-index: -1;
}

#right {
z-index: -1;
}

Instead of "right" being to the right of "left" it is below it in
IE6. Can anyone tell me what I need to do to get it positioned
correctly?

Thanks

Tom Esker

Reply to this Message

tesker@interdyne.com - 23 Jul 2008 03:19 GMT

On Jul 22, 6:49 pm, tes...@interdyne.com wrote:

> I'm working on a website that looks great in Firefox, IE 7 and IE 8 ,
> but in IE 6 one of the elements appears below another element instead
[quoted text clipped - 35 lines]
>
> Tom Esker

I pretty much figured it out. IE6's default position is static and
any element (left at the static default) that has sub elements with
position: absolute, will be positioned relative to the top upper left
of the parent element, not the top of the browser window. So I
changed my CSS like thbelow and everything is positioned correctly -
except that I can't get it centered. I tried 3 different ways to
center the parent element as mentioned at http://css-discuss.incutio.com/?page=CenteringBlockElement
but none of them worked. Oh well. Anyway here is how I did the CSS
even though it's not centered:

#wrapper{
/* 4 lines below are supposed to center the content but it didn't work
*/
width: 1024px;
left: 50%;
top: 50%;
margin-left: -512px;
}

#leftwrap{
float: left;
position: absolute; left: 10px; top: 7px;
margin-top: 5px;
width: 180px;
}

#topbannerad{
height: 100px;
margin-top: 5px;
width: 580px;
margin-right: 5px;
position: absolute; left: 195px; top: 7px;
z-index: -1;
}

#right {
width: 580px;
text-align: left;
position: absolute; left:195px; top:130px;
z-index: -1;
}

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / July 2008

Need help with positioning elements for IE6