Blog
Repurpose your Images for Mobile Email |
|
10.19.2011 Get connected with Email on Acid for up-to-date news and information on the subject of email design, development, and testing!
|
| |
By Michelle KlannDecember 6, 2010 |
12 Fixes for the Image Spacing in HTML EmailsHave you ever noticed the small spacing below images in Hotmail and Gmail? Every browser renders this spacing except for IE 7 and lower. Just after writing this blog post: The Mystery of Hotmail's Strange Image Spacing, and after lots of hair pulling, we realized that the culprit for this pesky occurrence was actually the DOCTYPE. What I find even more interesting is that the latest DOCTYPE for HTML 5 causes the same image spacing issues! Because of this we might see browsers like Firefox, Safari, Chrome and Opera come out with an update in the near future. Until then, welcome to the party web developers. The following DOCTYPES cause the spacing:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html> Examples before any fixes: Below are some options for correcting the issue. Option 1.) Add style="display:block" to your image Example: <img src="http://www.test.com/test.jpg" style="display:block">
 This is the most popular fix but as you can see above, it causes a line break before and after your image. If you are working on an HTML email, this fix must be done inline for each image (like the example above) because Gmail does not support embedded or linked style sheets. Options 2-8.) If your image height is greater than 16px, set the "align" attribute in the image to any of the following: absmiddle, middle, left, right, absbottom, texttop OR top Example: <img src="http://www.test.com/test.jpg" align="absbottom">
 Note: align="baseline" and align="bottom" do not work. Keep reading if your image height is less than 16px.
Option 9.) Place the image in a block element with a style="line-height:10px" (or lower) Example: <div style="line-height:10px">
<img src="http://www.test.com/test.jpg"> </div> 
Option 10.) Place the image in a block element with a style="font-size:2px" (or lower) Example: <div style="font-size:2px">
<img src="http://www.test.com/test.jpg"> </div>  Obviously, this is only an option if you don't have any text in the container. Option 11 & 12.) Add style="float:left" OR style="float:right" Example: <img src="http://www.test.com/test.jpg" style="float:left">
 Both Gmail and Hotmail support the float property. Again, if you are working on an HTML email, this fix must be done inline for each image because Gmail does not support embedded or linked style sheets. If your image is less than 16 pixels high:Only seven of the above fixes will work:
Hopefully at least one of these work-a-rounds will meet your design requirements. If you are aware of additional fixes, don't hesitate to share it below! |
Comments
Thanks for this article, it was great help to me!
Best regards
Sanj
full tilt
If you haven't signed up yet, give our FREE online Email Test a try. Just drop in your code and we will instantly simulate your email in the most popular email clients!
Get connected with Email on Acid for up-to-date news and information on the subject of email design, development, and testing!
All of this is no mystery at all. You won't believe it, but it's the W3C defined standard way of rendering images within table cells (on the baseline of the text)!
You will always get that spacing with any Doctype that causes your Browser to display a Document in a standard / strict (as opposite to the "quirks" or so called "almost standard") mode because images have to be displayed this way accorging to the W3C standard. You can see the following list for a full list of Browser / Doctype combinations:
http://en.wikipedia.org/wiki/Quirks_mode
Every Doctype that triggers a green "S" rendering mode will cause those problems and thus there are many more Doctypes than the two mentioned in this article, that cause this "problem".
Thanks again for your article and the nice examples.