I have an html5 page with a navbar. Completely scratch coded. I just recently added a doctype to the item, and now I’m getting extra space under my navbar. If I remove the doctype declaration, it goes back to normal. I have completely reset padding, margins, etc. on everything, and cut it down to the a small amount of code that illustrates the issue.
The page can be seen at http://hackthetruth.org/webdesign/broken
Does anyone know why declaring the doctype is messing with the height of a div?
It's because the DOCTYPE changes the rendering mode to Standards Compliance Mode. Specifically, this means you're using the W3C Box Model now which computes width/height for block elements differently than quirks mode.
Did anyone get anywhere with this? I'm having the same issue and can't find much help anywhere.
The Box Model, though interesting, does not help. It seems only to affect widths and heights where they are explicitly set. The problem here (or mine and Dakota's if I've understood correctly) is the height of a container when it has no explicit height and no padding or border - it seems to be higher than, and leaves space below (not above or to the sides - just below), its contents.
If anybody has found a solution, please let us know.
Mate you have 2 stray </div> tags in that page. On lines 32 and 34. Delete and retry. See if that fixes it.
I had the same problem with one of my sites. i found this answer here:
"With an HTML5 doctype, images receive what seems to be the line-height attribute which text normally gets, and thus you get a “margin” underneath them. You can either set them to display:block or line-height:0, although I haven’t tested the latter enough to be sure it’s a good fix."
I applied the line-height;0 to the div which contained the navigation images. It did the trick for me.
I've never used display: inline-block due to the IE7 issues, so I'm not familiar with its quirks. It seems like it's unnecessary to apply it to ul#pagetab in your situation, since it's not surrounded by inline elements. I would just convert it to a regular block element. Moreover, since it contains floated elements that do not need float beside some inline elements, I would just give ul#pagetab a real height via display: block; overflow: hidden;.
This appears to resolve all your issues (which I can't account for in detail) and provides stylistically more appropriate styles.