A very irritating html5 image space
Posted: Friday, 16 July 2010 16:24 Section: Blogs - Category: Design Tutorials

html5-imageWhile designing the Corporate WordPress 3.0 theme, I was discovering a couple of things that most may not be aware of and I have to say it was 2 hours of wasted valuable time. So I thought I would share this mystery image space below my photograph that I had placed into the header showcase area not knowing where it was coming from.

WordPress 3.0 Uses an HTML5 Doctype <!DOCTYPE html>

In the event you were not aware of this because we take it for granted, the DOCTYPE that WordPress 3.0 now uses is the newer HTML5 <!DOCTYPE html> in the header of their default theme "Twentyten". Anyone who designs their own theme for WP 3 may be using this theme as a starting point - which is what I started with - only to later discover something that I overlooked, which is the new doctype that puts it into strict mode and will render images as inline...I won't bore you with the technical stuff, but it gives extra space (margin) below images for characters that have a drop portion of it's visual rendering. For example, the letters g,q, p, j, etc. I know it sounds strange. The space in question can be seen in the photo above where the black line you see is actually the background showing and giving a 5px margin space.

For those who want to hear a little about doctypes and why they are used, here is a quick quote from the wikipedia.org site for Quirks Mode:

To maintain compatibility with the greatest possible number of web pages, modern web browsers are generally developed with multiple rendering modes: in "standards mode" pages are rendered according to the HTML and CSS specifications, while in "quirks mode" attempts are made to emulate the behavior of older browsers. Some browsers (those based on Mozilla's Gecko rendering engine, or Internet Explorer 8 in strict mode, for example) also use an "almost standards" mode which attempts to compromise between the two, implementing one quirk for table cell sizing while otherwise conforming to the specifications.

If you want to read more, you can read the rest of the details at Wikipedia for Quirks Mode.

A Couple of Quick Solutions

Unless you plan to start working with HTML5, you may want to change your doctype from:

<!DOCTYPE html>

...back to this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Another option is that you can still use the new doctype, but for images, you can add an extra css to your styling with a display block. Basically it looks like this:

img {display:block;}

Keep in mind that the above are only two quick solutions but you may run into more issues.

Just Something to Think About When Using the New Doctype

As tempting as it may be, there will be one drawback to using the new <!DOCTYPE html> in your themes with relation to code validation....it may not completely validate because the W3C validation is based on HTML 4, not HTML 5. So if validation is important, you may want to change your doctype to the older quirks mode. The validator will check it but it will give you a warning about using HTML5.
Last Updated on Friday, 16 July 2010 17:21