Welcome to WebmasterWorld Guest from 54.225.6.51

Forum Moderators: not2easy

Message Too Old, No Replies

IE 6 Div height too tall

top navigation bar using ul

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

New User

10+ Year Member

joined:June 17, 2003
posts:22
votes: 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

2:20 am on Sept 15, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 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

3:17 am on Sept 15, 2004 (gmt 0)

New User

10+ Year Member

joined:June 17, 2003
posts:22
votes: 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

11:21 am on Sept 15, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:June 17, 2001
posts:130
votes: 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.
5:45 pm on Sept 15, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 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;
}

7:01 pm on Sept 15, 2004 (gmt 0)

New User

10+ Year Member

joined:June 17, 2003
posts:22
votes: 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

7:24 pm on Sept 15, 2004 (gmt 0)

New User

10+ Year Member

joined:June 17, 2003
posts:22
votes: 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]

1:46 am on Sept 16, 2004 (gmt 0)

New User

10+ Year Member

joined:June 17, 2003
posts:22
votes: 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

4:09 pm on Sept 16, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 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.