CSS issue with IE 5 and below

[pcguru333]

I am having the proverbial brain fart with this one. I am fairly well self taught in CSS which means I have a big ego and I get stumped when I hit a rut in the CSS road to happiness...
My page uses CSS to generate a rollover navigation bar on the left side of the screen. I am using a combination of absolute and relative positioning. The issue is that some of the boxes in the navigation bar are overlapping in earlier versions of IE.

Below is a snippet of the CSS used for the navigation bar.

#leftbar
{
margin:0;
padding:0px;
position:absolute;
border-right:1px solid #458;
background-color:#fff;
font: 16px arial;
left:1px;
top:130px;
width:151px;
height:80%;
color:#458;
}

Thanks in advance for your assistance and consideration

Dan T.

[Nick_W]

...all good so far. What about the relative part?

Nick

[pcguru333]

OK here is the all of the linked CSS:

body {
background-color:#fff;
margin: 0;
font-family: arial;
color:#000;
height:100%;
width:100%;
}

#logo{
margin:0;
background-color:#fff;
position:absolute;
left:1px;
text-align:top;
font:32px arial bold;
height:130px;
z-index:-1;
}

#leftbar
{
margin:0;
padding:0px;
position:absolute;
border-right:1px solid #458;
background-color:#fff;
font: 16px arial;
left:1px;
top:130px;
width:151px;
height:80%;
color:#458;
}
#copy {
position:relative;
top:90%;
padding:3px;
font:10px arial bold;
text-align:justify;
}

#main{
padding:5px;
position:absolute;
top:130px;
left:-1px;
color:#458;
background-color:#fff;
border-top:1px solid #458;
margin: 0 10px 0 154px;
width:75%;
height:75%;
text-align:justify;
}

.menu {
position:absolute;
left:12px;
padding:3px;
margin:10px;
color:#458;
border:1px solid #458;
width:100px;
text-decoration:none;
text-align:right;
}

a, a:link, a:visited, a:hover, a:active{
color:#458;
text-decoration:none;

border-bottom:1px dashed;
}

a:link.menu
{
color:#458;
border:1px solid #458;

}

a:visited.menu {
color:#458;
border:1px solid #458;

}

a:hover.menu {
color:#fff;
border:1px solid #000;
background-color:#458;

}

a:active.menu {
color:#fff;
border:1px solid #000;
background-color:#458;

}

h1{
font:900 150% arial;
color:#458;
}

h2{
font:900 110% arial;
color:#458;
text-decoration:underline;
}

If this all looks OK do you need to see the HTML?

Thanks

[Nick_W]

No, not all of the html please! hehe, just the relevant bit for the menu if you could...

Nick

[pcguru333]

Below is the snippet of HTML. The part that overlaps is the 'other services' overlaps the 'contact us'

<!--
****************************************
******DIV FOR LEFT SIDE BAR MENU********
****************************************
-->

<div id="leftbar">
<div class="menu" style="position:absolute;left:22px;">home</div>
<a href="techsupport.html" class="menu" style="position:absolute;top:25px;">tech support</a>
<a href="webservices.html" class="menu" style="position:absolute;top:50px;">web services</a>
<a href="services.html" class="menu" style="position:absolute;top:75px;">other services</a>
<a href="contact.html" class="menu" style="position:absolute;top:100px;">contact us</a>
<a href="bluegila.html" class="menu" style="position:absolute;top:125px;">about us</a>
<div id="copy">All text, code, and images are intellectual property of Blue Gila&reg; &copy;2003.</div>
</div>

[Nick_W]

Hmmm...

I'm not certain of the exact cause but take a look at this old post: [webmasterworld.com...]

I think it's a much simpler way to do the same thing and may well get you on the right track...

At a glance, I'd guess you're running into bad box model handling..

Nick

[pcguru333]

Thanks I'll review the former post and see if this corrects the issue.

Dan