menu bar is thicker in IE6

[shonamelissa]

Hi everybody,

Yes, I'm having problem with IE 6 (no..really?) I'm sure it must be very easy to fix but I can't figure it out.

I have a menu/navigation bar across my page which just works with CSS and in all browsers it looks beautiful, but it IE 6 it is double the height and therefore makes the text/links inside it float to the center and they look so small and lost.

I have two stylesheets, one for normal and then a hack one for IE6, so if any changes need to be made to the below CSS I will change them in my <!--[if lt IE 7]> style.

Here is the CSS:

CSS code:

#menu {
font-family: Arial, sans-serif;
font-weight: regular;
text-transform: uppercase;
margin: 0px 0;
padding: 0 0 0 10px;
list-style-type: none;
font-size: 10px;
background: #e9e9e9;
height: 20px;
border-top: 2px solid #e9e9e9;
border-bottom: 1px solid #ccc; }
#menu li {
background: #e9e9e9;
float: left;
margin: 0; }
#menu li a {
text-decoration: none;
background: #e9e9e9;
display: block;
padding: 0 20px;
line-height: 60px;
color: #3f3939; }
#menu li a:active {
background-color: #f4f4f4;
color: #999; }
#menu li a:hover {
background-color: #f4f4f4;
color: #999; }

I really want this sorted before anybody with v6 sees it. I think it looks terrible.

Thanks for your help everyone

[swa66]

Legacy IE versions have a tendency to increase size of elements due to the block trying in a non-standard way to contain its descendants.
line-height: 60px; Is likely causing the height:20px being treated as if it was min-height.
Try reducing it in a conditional comment. That way all you need to care about is how it look sin IE6 and not have to worry what all other browsers do with it.

BTW: The hold-out IE6 users by now would be slowly expecting their obsolete browser starting to fail on more and more websites ...

[shonamelissa]

Thanks for your reply swa66. I have tried reducing the line-height but instead of reducing the thickness of the menu, it just moves the text links upwards. Any other ideas?
If you would like to see what I mean open <snip> in an IE6 browser

[edited by: swa66 at 12:35 am (utc) on Dec. 3, 2009]
[edit reason] No links please, see ToS and Forum Charter [/edit]