Image Quirks in XHTML-MP 1.0

At Handi we use the dotmobi ready test to  validate our mobile pages. One criteria used by the test is the HTML DOCTYPE of your page. Getting a perfect score requires setting your DOCTYPE to a mobile compatible type like XHTML Mobile Profile 1.0:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

Link to example XHTML

Different DOCTYPEs can effect the rendering of your document in a browser and some DOCTYPES have known quirks that can throw off even a perfect design. In XHTML-MP 1.0 we’ve found that images are 4px bottom margin - even when the margin is set to 0.

You can easily fix this problem by by giving all images this default styling:

img { vertical-align: middle; }

Related Links:

Leave a Reply