Why does the HTML5 DOCTYPE mess with my padding?

Question

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 docty

Answer 1

I had the same problem when upgrading a XHTML4 website to HTML5. I had lots of these:

<a><img></a>

Which ended up with the magical extra padding around the images. For me the solution was simple -- add this css:

img { vertical-align: top; }

Answer 2

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.