Quick Tip: Image Rendering Issue with Outlook 2013

Nabeel John

You may have noticed that perfectly-mapped, sliced images placed inside table cells that render flawlessly across the board will sometimes show unwanted gaps in Outlook 2013. If you’re wondering if it’s something that you’re doing wrong or it’s a known Outlook 2013 issue, well, it’s definitely Outlook!

HeaderImage-Before

Outlook 2013 gives a default height of about 15px to all table cells, unless you specify the value manually. That is one reason you see a gap when the image you are using is less than 20px in height. But the good news is, by following the simple steps below you can save yourself from all the frustration.

  • Collapse borders of all the tables that you are using to put your image slices together. This will get rid of the small borders between the images.
  • Set table borders, cellpadding and cellspacing values to zero “0.”
  • Set line-height for each TD to be the same height as that of the image it contains (once again remember this is for images that are less than 20px in height).
  • Set height for each TD to be the same height as that of the image it contains.
  • Finally regardless of image’s width and height specifications you should always add the “display:block;” CSS property to all your image tags. This also prevents Gmail from adding a margin around the image that is adjacent to another image. Eg: Images in a single row two column table.

Voila! By applying the above steps correctly your final image should look great!

HeaderImage-After

Take a look at the sample code below, important properties described in steps 1 to 5 above are highlighted:

headercode

Happy coding!

 

 

About the Author
Nabeel John

Nabeel John is a Digital Marketing Designer at Informz. Outside of work, Nabeel enjoys photography, graphic design and web development.