I've created a navigation header for http://www.dennisvogel.com/. When I view it with Safari on Mac OS X, the thin white and gray border that I wish to display just below the navigation blocks is shifted to the top and right (i.e. like it's sticking outside my container). It displays like I want it to when viewed with IE 6.0 on Windows XP. I'd appreciate any guidance if there is a known Safari bug I need to work around, or if I've made an error. Thanks. Applicatble styles below: #header { height: 40px; padding: 20px 0px 5px 25px; } #navigation { width: 100%; border-bottom: 4px solid #CCC; background: #FFF; margin: 0px 20px 0px 25px; padding-bottom: 2px; } #navigation ul { width: 100%; margin: 0; padding: 0; background: #333; list-style-type: none; } #navigation li { display: inline; padding: 0; margin: 0; } #navigation a { background:#555; border-right: 1px solid #000; padding: 18px 30px 4px 10px; margin: 0; color: #FFF; text-decoration: none; display: block; float: left; width: auto; font: bold 1.1em/100% Arial, Helvetica, sans-serif; letter-spacing: 1px; } #navigation a:hover, #navigation a:focus { background: #F63; } #navigation a:active { background: #F60; color: #FFF; } Code (markup):
safari bug haha, that's a funny one. Internet Explorer has a bug that makes it display borders incorrectly, it subtracts the border-width from the actual width of the object. http://css-discuss.incutio.com/?page=BoxModelHack
Thanks for the tip Daniel. I'm not having problems with the IE display though. Just Safari. So I'm not sure how the link helps me, unless what I've done to get it "right" in IE is counter to everything else.
Have you tested in firefox, you will probably get the same "bug" there too. It that is the case you have to fix the design for firefox/safari and then use one of the hacks to make it display correctly in Internet Explorer.
Doh! Yep. I'm seeing the same thing in Firefox. Damn it! I spent a lot of time trying to get this to work in IE. Guess I have to start over and am not sure what I've done "wrong".
Modern browsers do not cause containers to enclose their float descendants without proper coding. See enclosing float elements. The simple fix in this case; #navigation {overflow: hidden;} Code (markup): //edit: BTW, it is good practice to code for compliant browser such as Firefox, Opera and Safari. As you get things right for modern browsers, you can hack, work around or dumb down for obsolete browsers such as the IE family. --gt //edit some more: Use a complete DTD. Without it, browsers are in quirks mode which screws up the box model. --gt cheers, gary
The "simple fix" did clear up Firefox, but not introduced the same problem in IE. I'm using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">. Is that incorrect or incomplete? Thanks for the assistance
No, that's incomplete see these: HTML 4.01 Strict, Transitional, Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Code (markup): New documents should be marked up against a strict DTD. cheers, gary