margin/padding changes when doctype changes

by **Darren** » Wed Nov 04, 2009 1:04 am

Today I decided to start adding some HTML5 to a WordPress theme I'm developing. I replaced the old XHTML Transitional doctype with <!DOCTYPE html> and immediately experienced a small margin issue.

Take a look at the "Home" tab on this page:

http://www.darrenhoyt.com/demo/wordpres ... heme=Gravy

There is now a 3-4 pixel space below that tab, whereas with the old doctype it was flush with the bottom of the navbar. If I change the doctype back, the spacing is fixed.

In the past if I've forgotten a doctype, my pages have been throw into quirksmode in certain browsers, causing margin issues, but that's obviously not the case here.

Like I said, the only steps I've taken so far to get my theme to validate as HTML5 was to change the doctype. I haven't begun to add the nav, header, etc, tags.

Sorry if this is an obvious question. Thanks!

by **zcorpan** » Wed Nov 04, 2009 9:53 am

Your old doctype triggers "almost standards mode". Almost standards mode uses the quirky way to lay out images in table cells.

http://hsivonen.iki.fi/doctype/
https://developer.mozilla.org/en/images ... rious_gaps

Now, you don't use any <img>s or tables there, but clearly your CSS triggers the same behavior in Firefox and Safari (but not in Opera).

Your ul is display:inline-block which means that it should act as an inline element on the outside. Inline elements sit in line boxes, so a line box is created in the parent div and the ul sits on the baseline of that line box. Some space below the baseline is preserved to give space for characters such as "y" and "j".

The fix is to not use inline-block or to change the vertical-align to bottom or so.

by **Darren** » Wed Nov 04, 2009 8:20 pm

Ah, I knew inline-block would cause an issue (it's there to help the submenus display properly), but did not even think to try vertical-align:bottom as it's never consistent - yet it did the trick!

I really appreciate both your explanation and solutions. Great stuff, zcorpan.

by **brlewis** » Fri Dec 04, 2009 10:03 pm

A month later this post is still helping people out. I had a non-img problem with vertical padding/margin when changing doctypes, and setting the appropriate element display:block solved it.

Thanks!

margin/padding changes when doctype changes

margin/padding changes when doctype changes

Who is online

Who is online