Div Gaining 6 Pixels In Height

I'm working on a silly little project, and in this project I have a div with a background image that repeats horizontally. I do not have any paddings or margins specified, but I do have borders specified. However, I am using box sizing so the borders should be mathed in. Here is my CSS. Can anyone see why 6 pixels might be added to the height of #head_nav_wrap The DIV is supposed to be 39px in height, but it always ends up 45px. This has got to be something stupid.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
}

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}

body {
line-height: 1;
background: #FFFFFF;
}
h1, h2, h3, h4, h5, h6 {
clear: both;
font-weight: normal;
}
ol, ul {
list-style: none;
}

/* head */
#head_main_contain {
min-width: 100%;
background: #000000;
border-top: #333333 1px solid;
}

#head_nav_wrap {
background-image:url('images/nav_back.png');
background-repeat:repeat-x;
height: 39px;
min-width: 100%;
border-top: #FFFFFF 1px solid;
border-bottom: #FFFFFF 1px solid;
}

I was just doing some debugging of my own in a blank page, so I threw your CSS in there to test it. A div "head_nav_wrap" both inside a "head_main_contain" and alone was 39px high. It seems to be something environmental to your page. Is there something else to it, like what goes IN "head_nav_wrap"?

Hi there stevenmw,

like Custard7A, I was unable to replicate your problem. ;)

coothead

It is supposed to be in this order.

<div id="head_main_contain">
<div id="head_nav_wrap">

</div>
</div>
Edit:
Thanks, guys. I guess I had hit ctrl + and zoomed the page. It's at 39 now. Appreciate the quick replies.

Thanks, guys. I guess I had hit ctrl + and zoomed the page. It's at 39 now.

Hah, those moments.. :rolleyes:

Thought I'd tack on here, development tools like FireBug in Firefox, or Dragonfly in Opera are great for catching CSS problems, especially the simple ones. Gives a great visual model of your element boundaries in the working environment, and the values don't change when you're zoomed or not!

Cheers.