Need help with positioning elements for IE6

[tesker]

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/transpar...s/template.css and
I'm detecting if the browser is IE6 and inserting CSS specific to IE6
at http://indppc.com/templates/transpar...mplate-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

[tesker]

On Jul 22, 6:49*pm, [e-mail] 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
of to the right where it is supposed to be. *The site is athttp://www.indppc.com/. *The main stylesheet is athttp://indppc.com/templates/transparent_bliss_1.5/css/template.cssand
I'm detecting if the browser is IE6 and inserting CSS specific to IE6
athttp://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

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...ngBlockElement
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;
}