homepage Welcome to WebmasterWorld Guest from 23.22.173.58
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS issue with IE 5 and below
pcguru333

10+ Year Member



 
Msg#: 1906 posted 4:22 pm on Sep 23, 2003 (gmt 0)

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

WebmasterWorld Senior Member nick_w us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 1906 posted 4:25 pm on Sep 23, 2003 (gmt 0)

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

Nick

pcguru333

10+ Year Member



 
Msg#: 1906 posted 4:29 pm on Sep 23, 2003 (gmt 0)

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

WebmasterWorld Senior Member nick_w us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 1906 posted 4:38 pm on Sep 23, 2003 (gmt 0)

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

Nick

pcguru333

10+ Year Member



 
Msg#: 1906 posted 4:49 pm on Sep 23, 2003 (gmt 0)

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

WebmasterWorld Senior Member nick_w us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 1906 posted 4:54 pm on Sep 23, 2003 (gmt 0)

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

10+ Year Member



 
Msg#: 1906 posted 5:02 pm on Sep 23, 2003 (gmt 0)

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

Dan

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved