Positioning and z index

Trouble with div positioning in IE

[nugg79]

I am coming up with a new site and am having trouble in IE trying to line everything up where it is supposed to be positioned. IE is the only browser that shows this problem. Also, in IE the top menu wants to float under the div that is below it. I have tried the z-index to set it to 1 and also to 999 as instructed from other sites with no success. I am attaching the sites address rather than specific code seeing that I am not sure where the problem is located. If it helps with the problem I can paste the code if requested.

<snip>

Thanks

[edited by: engine at 4:43 pm (utc) on April 15, 2009]
[edit reason] See WebmasterWorld CSS Charter [/edit]

[Fotiman]

Welcome to WebmasterWorld! I did not look at your example (personal URLs are not permitted: please post code examples instead. See the TOS [webmasterworld.com]). However, I suspect that you might seeing the same issue that I just posted about here:
[webmasterworld.com...]

Basically, if the positioned elements are not within the same stacking context, you can't layer them.

[nugg79]

So essentially your saying that I have to apply the navigation div inside of the same parent div as the left content so that there will be a hierarchy and IE will apply a z-index of sorts? I am assuming also by doing this I would apply an absolute position and just use negative increments to place it where I want it to show.
I will post the code of the current site.

[nugg79]

Here is the html:

<div id="wrapper">
<div class="text">
<div id="header">
<div id="logo">
<h1><img src="logo-blue.png" alt="logo" width="239" height="46" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="4,5,231,43" href="http://www.example.com" target="_self" alt="Logo" />
</map></h1>
</div>

<div id="Navigation">
<div id="navigation">
<ul>
<li><strong><a href="#">Home</a></strong></li>
<li><strong><a href="#">Products</a></strong>
<ul>
<li><a href="#">widget</a></li>
<li><a href="#">widget</a></li>
<li><a href="#">widget</a></li>
<li><a href="#">widget</a></li>
<li><a href="#">widget</a></li>
</ul>
</li>
<li><strong><a href="#">Partners</a></strong>
<ul>
<li><a href="http://www.example.com" target="_blank">example</a></li>
<li><a href="http://www.example.com" target="_blank">example</a></li>
<li><a href="http://www.example.com" target="_blank">example</a></li>
<li><a href="http://www.example.org" target="_blank">example</a></li>
<li><a href="http://www.example.com" target="_blank">example</a></li>
<li><a href="http://www.example.com" target="_blank">example</a></li>
</ul>
</li>
<li><strong><a href="Contact.html">Contacts</a></strong></li>
<li><strong><a href="About.html" class="style1">About</a></strong></li>
</ul>

</div>

</div>
</div>

<div id="content">
<div id="leftcolumn">
<div class="text"> </div>
</div>
<div id="rightcolumn">
<div class="text">
<div class="subtitle">
[specifics deleted]
<hr width="20%" />
<div id="isotext">
[specifics deleted]
</div>
</div>
</div>
</div>
<div id="rssbar" class="subtext">
<div class="text">
<!--Rss Code-->
<div id="feed-control">
<span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span> </div>
<!--End RSS code-->
</div>
</div>
</div>
</div>
</div>

[edited by: swa66 at 4:25 pm (utc) on April 16, 2009]
[edit reason] No URLs, no specifics, please use example.com, widget etc. [/edit]

[nugg79]

I believe this is all of the CSS needed:
body {
font: 10px Myriad Pro, Arial, sans-serif;
/* background:url(images/whitebg.png); */
padding: 0;
margin: 0;
background-repeat:repeat-x;
text-align:center;
background-color: gray;
}
#wrapper {
height: 800px;
width: 800px;
position: absolute;
left:50%;
margin-left: -400px;
text-align: center;
padding:0px;
background-color: white;

}
#header {
width: 300px;
height: 100px;
position: absolute;
Float: left;
margin-bottom: 20px;
text-align: left;
}
#logo {
width: 500px;
height: 55px;
float: left;
position: absolute;
top: 0px;
left: 20px;
margin-bottom: 20px;
}
#Navigation {
width: 490px;
height: auto;
float: left;
position: absolute;
top: 70px;
left: 0px;
text-align: left;
clear:both;
z-index:1;
display:block;
font-family: myriad pro, ariel, sans-serif;

}
/*Navigation bar information*/

#navigation ul{
padding:0px;
margin: 0px;
}
#navigation ul li{
display: inline;
height:30px;
float: left;
list-style: none;
margin-left:20px;
position: relative;
font-size:16px;
}
#navigation li a {
color:#27367A;
text-decoration:none;
}

#navigation li a:hover {
color:#4058C7;
text-decoration:none;
}
#navigation li ul{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:-20px;
top:25px;
}
#navigation li ul:hover {
display: block;
}

#navigation li:hover ul{
display:block;
width:120px;
}
#navigation li li{
list-style:none;

display:list-item;
font-size:10px;
}
/*end new*/

/* End of Navitgation Bar information */

/* Main Content area */

#Content {
height: auto;
position: relative;
width: 800px;
left:50%;
margin-left: -400px;
background-color:#CCCCCC;
padding-left:0px;
text-align: center;

}
#leftcolumn {
width: 490px;
float: left;
position: absolute;
left: 20px;
top:120px;
height: 400px;
border: thin solid gray;
text-align: left;
padding: 0px;
}
.text { /*Text areas inside of the columns*/
width: 95%;
margin: 5px;
height: auto;

}
.subtext {
font-family: Myriad Pro, Ariel, Sans-Serif;
Font-size: 8px;
font-weight: lighter;
color: #858585;
width:90%;

}
.subtitle {
Color:#27367A;
font-family: Myriad Pro, Ariel, Sans serif;
font-weight: bold;
font- size:14px;

}
#rightcolumn {
width: 250px;
float: right;
height: 630px;
border: thin solid gray;
text-align: center;
position: absolute;
right: 20px;
top: 120px;
}
#isotext {
height:auto;
width:100%;
vertical-align:bottom;
position:absolute;
right:0px;
bottom:5px;
text-align:center;

}
#rssbar {
width: 490px;
float: left;
position: absolute;
left: 20px;
top:530px;
height: auto;
border: thin solid gray;
text-align: center;
padding: 5px;
margin-top:25px;

}
/* RSS Feed */

[nugg79]

Sorry for the long code but I didnt want to leave an important part out.

[swa66]

Try validating your css first, it's got a number of syntax errors in it.

[jigsaw.w3.org...]

[nugg79]

This took care of the problem of layering or z-index.
Thanks