Hello. Well, everytime I make a menu with CSS I encounter this problem. There's always a one pixel difference between Firefox and Opera/IE8 and sometimes IE7 (the menu is always 1 pixel higher up). Everytime I make a website I get this problem, and I usually manages to fix it somehow, but I have no idea what I do. So I thought I'd ask why this occur and how to fix it so I won't have to spend all this extra time everytime I make a website. I guess I'm doing something wrong? Image of the problem: Firefox/IE6 and IE7 Opera/IE8/Safari The code is this: CSS #menu{ height:29px; float:left; width:860px; text-align:right; } #menu ul{ list-style:none; } #menu li{ display:inline; } #menu li a{ padding:8px; font:12px Verdana; line-height:29px; height:29px; color:#b9b997; background:url(images/menu.gif) repeat-x; } #menu a:hover, #menu a.current{ background:url(images/menu-hover.gif) repeat-x; } Code (markup): HTML <div id="menu"> <ul> <li><a href="#" class="current">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Page 1</a></li> </ul> </div> HTML:
Hi, Firstly it's an advantage to add float:left; to your #menu li a, this will also trigger display:block on the anchors, as currently, as default anchors on set to display inline. You need to have display:block set so that it obeys padding heights widths etc.. Secondly all browsers apply different default margins and paddings on both the ul and li elements. So you can reset/set the values of the margin and padding for the ul/li directly e.g #menu ul, #menu li { margin:0; padding:0; } Code (markup): You can choose different values other than 0, just make sure you set them. or use the universal reset: *{ margin:0; padding:0; } Code (markup): which resets the different default margins and paddings applied by browsers for all elements.
Well, I'd be careful of resetting padding like that (using the *), since it sucks with forms, but if there are no forms then it's ok (but most elements don't have a padding problem, just lists (the li's have left padding in some browsers, but not the anchors or the ul)). Anyway I remember running into a similar but opposite problem with menus, where just IE had this little 1px space at the bottom no matter how tall I made my menus. Setting overflow (to something other than default "visible") worked for both IE6 and 7... so I guess it wasn't Haslayout (since it doesn't trigger haslayout in IE6 anyway). wd is correct about the heights you are setting... on the anchors, when inline, they cannot be given heights or widths, unless you set them into block context (by floating them or whatever). Same goes for vertical margins whenever you want those too. I notice you (Mooseman) have "text-align: right". If you float or otherwise block your anchors then you don't have that anymore... unless you float: right, which will set your links out of order! So if your links aren't "right" enough for you, you can set the width of your whole menu to just wide enough for the tabs/anchors and float the whole ul right. This'll mimic the right-shifted tabs like you have now. Anyway let us know if blocking/floating the anchors does the trick for you... I can't remember the last time I left my anchors inlines in a menu! So it's been a long time since I've had this problem myself. I stopped using padding for anchor-height long ago, but continue to use it for side-padding (since floats, if they have no set widths, will shrink-wrap to the text content).
So a UL does not have any default margin/padding appled to it in any browser? Sorry to get away from the subject a bit but do you know if any browser has default padding applied to it whilst were on the subject..because I see some people reset the padding and margin on the body whilst others just reset the margin.
My bad, I said But itt should be (but most elements don't have a padding problem, just lists (the ul's have left padding in some browsers, but not the anchors or the li's)). I said it completely wrong! Li's don't have any padding, ul's and ol's have padding in just some browsers, margins in others. Good catch. I once ran across a supposed list of default margins and padding but it was definitely incorrect, because it did not list one I know of: in Firefox, th's and td's have 1px padding by default. I know because I make little table calendars and when I removed my * { margin: 0; padding: 0; } and just had * { margin: 0; } they died horrid deaths due to that one pixel : ( Not something you'd notice in a larger table though (and usually we add padding to cells in those). Resetting margins and padding on the body only affects the body, not any of the body's children. So people who do that are still getting list padding/margin unless they remove that later. What I've been doing for a while now (after I abandoned the * for both margin and padding) is * { margin: 0; } html, body, ul, ol, th, td { padding: 0; } even though I'm still not sure if any browser has any default padding on html or body elements, so I still have that in there for safety (and laziness, I've never opened them all up and just looked). If I only have large tables and not calendars I don't even add the th, td. I only add ol if I have a terms&conditions page since that's about the only place I get ol's. The other places padding occurs, you want to keep. That would be in form controls. Removed padding can't be re-added in some browsers (noticeably Opera) so in some browsers you'll get cut-off drop-down selects (the arrow covers the option text), text inputs look a bit goofy, and the submit etc buttons don't have any padding to space around the value text and don't do their "depressed" thing when you click on them, which is considered an accessibility thing (let the user know the button was clicked).
Oh and yeah sorry, I forgot to mention that I already got the * { margin: 0; padding: 0; } at the top of the css. Anyway, I tried assign the float:left; to the li a and it seem to be working fine. Although the text itself still differs 1px in the browsers I mentioned before. The backgrounds of the li's are fine now though. Not quite sure if I did it right. Here's how the CSS looks like now: #menu ul{ list-style:none; float:right; } #menu li{ display:inline; } #menu li a{ padding:0 8px; font:12px Verdana; line-height:29px; height:29px; color:#b9b997; background:url(images/menu.gif) repeat-x; float:left; margin:0 1px; } /* and I removed the text-align:right; from #menu******/ Code (markup):
The text differing by 1px in this case could be from two things: you have an odd number for the height and line-height. At least Firefox is known to have rounding errors, sometimes, with odd-numbers, and I've seen an IE error with box widths which also only occurred when boxes had an odd-numbered width. Second possibility is, you've stated 12px and Verdana. Do all your browsers support Verdana? None of my older Linux browsers have Verdana, which has a larger x-height than other fonts at the same font size (Verdana's just big). Another big font is Deja-vu Sans and Bitstream Vera sans for some unix systems. Which way are they off by 1px? Is it still there if you set the height and line-height to an even number? *edit, next time we have vector questions, you can help us!!!
The text were 1px higher up in Opera etc compared to Firefox etc. And both those things you mentioned actually solved the problem. When I changed the font to Arial instead of Verdana it solved the problem. And if I kept the Verdana and changed the line-height to 30px that also solved the problem. Thanks for your help