Header Borders Display Incorrectly in Safari

[denvogel]

I've created a navigation header for [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. 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;
}

[Setek]

Hi denvogel, welcome to Webmaster World :)

Please note that you're not allowed to drop URIs like that - please read the Webmaster World Terms of Service [webmasterworld.com]

Now, about your problem: you'll be glad to know it's not a "Safari mis-render". It's rendering exactly how it's supposed to render. You should develop your layout in a standards-compliant browser such as Mozilla Firefox, or even Safari if it's your only browser (as Safari has a couple of "mis-renders", such as form inputs etc., so it's still better to work with Firefox, as it is a more... stable base.)

The reason why it's doing it:

1. Because your navigation list

   li

   s are set to display inline, so they only take up one line;
   
2. Then you've set the content inside those

   li

   s to float, so the parent is, as it's supposed to be, unaware of the children (and the parent of the parent, etcetera etcetera.)

How to fix it:
Your code that simulates the dual-border is written easily; basically a 4px gray border, with 2px of padding to simulate the 2px white border. I would add a clearing

div

, which forces the parent

#navigation

to encompass space up to and past all floating children:

<div id="navigation">
<ul>
<li><a href="/" title="Home">Home</a></li>
</ul>
<div style="clear:both;height:1px;overflow:hidden;font-size:0.1em;"></div>
</div>

N.B.: Feel free to class those inline styles up (to use somewhere else also), it's just there as ease-of-demonstrating.

Then change the padding on

#navigation

to 1px instead (as the clearing

div

will take up 1px height.)

And... solved :)

[edit]
Oh, also, the reason why the border sticks out to the -right-, and takes on a larger width than it does in IE, is because standards-compliant browsers render

width: 100%

properly: as in, 100% width of the viewport. Since your selector that has 100% width on it doesn't begin until 25px from the left, and ends 20px from the right, 100% width is going to push out your page (standards-compliant browsers render the box model as it should, not including margin as eating the overall width.)

Fix?

#navigation

is a

div

. It by default is already taking up the maximum-width allowable, minus margin, so it's doing what you want it to.

So is the

#navigation ul

. If you just strip out the two

width: 100%;

s that you don't need, it should work exactly the same. In all browsers.
[/edit]

[edited by: Setek at 2:57 am (utc) on Aug. 7, 2006]