homepage Welcome to WebmasterWorld Guest from 54.196.206.80
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
IE 6 Div height too tall
top navigation bar using ul
EsmereldaPea




msg:1213202
 1:32 am on Sep 15, 2004 (gmt 0)

I've got a navigation bar going across the very top of my page - 100% width - 0 top margin. It has a blue background with white text. Looks great in Opera 7, but IE 6 adds extra space at the bottom, and NN adds extra space (with the background color) both top and bottom.

I'm stumped - I tried playing with margins, padding, relative vs. absolute, placing the background color in the nested div (but it starts about 30 pixels in - b/c of the <ul>?).

I also placed another div around the UL and id'ed it "topmenu," removing the ID from the UL, and that fixed the height issue in NN and IE, but left some white space to the right in IE, and screwed up the text positioning for all three browsers (even though I tried setting text-align:center in several styles).

Can anyone shed some light for me? here's my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<HEAD>

<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
font: normal 9px verdana;
}
div#top {
position: absolute;
width: 100%;
padding: 1px 0;
background: #009;
color: #FFF;
top: 0;
left: 0;
}
#topmenu {
position: relative;
font-size: 11px;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 100%;
text-transform: uppercase;
}
#topmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#topmenu li {
margin: 0;
padding: 3px 20px;
display: inline;
text-align: center;
}
#topmenu a {
text-decoration: none;
color: #FFF;
}
#topmenu a:hover {
color: #FC9;
}

</style>
</HEAD>
<BODY>
<div id="top">
<ul id="topmenu">
<li>contact</li>
<li>home</li>
<li>about us</li>
<li>privacy policy</li>
<li>site map</li>
</ul>
</div>
</BODY>
</html>

thanks! Esme

 

DrDoc




msg:1213203
 2:20 am on Sep 15, 2004 (gmt 0)

#topmenu ul

What this means is any unordered list inside any element with an ID of #topmenu.
I'm sure that's not what you meant ;)

Try this instead:
ul#topmenu

or, really, this would be sufficient:
#topmenu

EsmereldaPea




msg:1213204
 3:17 am on Sep 15, 2004 (gmt 0)


#topmenu ul

What this means is any unordered list inside any element with an ID of #topmenu.
I'm sure that's not what you meant ;)

Thanks for the speedy reply. Actually, that IS what I meant. What I ended up doing is ID'ing only the DIV and NOT the UL (and combining the styles for the two elements):

div#topmenu {
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
position: absolute;
width: 100%;
padding: 1px 0;
background: #009;
color: #FFF;
top: 0;
left: 0;
text-align: center;
z-index: 2;
}
#topmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#topmenu li {
margin: 0;
padding: 3px 20px;
display: inline;
text-align: center;
}
#topmenu a {
text-decoration: none;
color: #FFF;
}
#topmenu a:hover {
color: #FC9;
}

However, now that the height problem is fixed (and I fixed the alignment issue by using text-align:center for the topmenu div), I still have the problem of the extra white space to the right only in IE - Opera and NN are fine. Wonder how I fix that? This is the best of the fixes so far.

I also have another issue that I might post on now that I've started adding other elements back into the page.

Esme

Rhys




msg:1213205
 11:21 am on Sep 15, 2004 (gmt 0)

Hi -
IEx6 seems to compute boxes in a weird manner.
How I solve this problem is to set the top menu div with borders, margins and padding all set to 0 - any browser can understand that and count the basic pixels you have set as width and height. If you need padding, for instance, set it on a nested div that has no background color. Any differences in the browser computation of the box size are then invisible.

DrDoc




msg:1213206
 5:45 pm on Sep 15, 2004 (gmt 0)

Actually, the problem is related to something else... The default page padding. Add this to your style sheet and you'll see the problem is solved:

html,body {
margin: 0;
padding: 0;
}

EsmereldaPea




msg:1213207
 7:01 pm on Sep 15, 2004 (gmt 0)

Thanks! Default page margin and padding at zero did it - it also solved a problem I had with the sub-menus not showing.

As usual, problem solved! I LOVE this forum!

Esme

EsmereldaPea




msg:1213208
 7:24 pm on Sep 15, 2004 (gmt 0)

BTW, this code is a version of the Suckerfish-based Vertical drop-downs at ALA - there's a bit of JS in there as well which I took out for brevity's sake.

Hope this helps someone else!

Esme

P.S. I was having a problem with the sub-menus appearing UNDER the other layers (even though the z-index was high) in the tables-based page designed by someone else, so I am redoing the entire page in CSS. I'll be back on if I STILL have that problem :)

[edited by: DrDoc at 3:25 pm (utc) on Sep. 16, 2004]
[edit reason] Removed broken link [/edit]

EsmereldaPea




msg:1213209
 1:46 am on Sep 16, 2004 (gmt 0)

Thanks! Default page margin and padding at zero did it - it also solved a problem I had with the sub-menus not showing.

Okay - now I hate IE even more than before. Since I had the menus working, I figured I'd add in the next div and get the page done and up before the client has a cow. Guess what? When I added the div, the menu stopped working again - so I simply do an undo in Dreamweaver (btw, I am hard coding most of this, not using DW's WYSIWYG features) and then save it again. it stops working! I've seen similar problems posted about IE. What gives? Any ideas? Why would something work, and then with the EXACT same code, not work? What kind of evil torture is this?

Esme

DrDoc




msg:1213210
 4:09 pm on Sep 16, 2004 (gmt 0)

It's much easier to create navigation based on :hover :)
Of course, IE doesn't support that, but there are behavior files that can be used to fix that.

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved