Inconsistent Spaces Below Td Elements In Tables In Html Email In Outlook (2007 And 2010)
Solution 1:
Using tables is standard practice in html email builds because css support is poor in email clients, particularly Outlook.
Keep your table structure but try these additions:
- Add
valign="bottom"
to the td cell containing box_dark_top.gif andvalign="top"
to the next two cells - For each image, set the css as
style="display:block;margin:0;padding:0"
Use inline css rather than internal
<tableclass="box"width="200"border="0"cellspacing="0"cellpadding="0"><tr><tdvalign="bottom"><imgsrc="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_top.gif"style="display:block;margin:0;padding:0"width="200"height="10"alt="" /></td></tr><tr><tdvalign="top"class="box_dark"><h2>Level 2<br /><spanclass="white">Care Assistants</span></h2><h2>Level 3<br /><spanclass="white">Senior Carers</span></h2><h2class="norule">Level 5<br /><spanclass="white">Managers and Deputy Managers</span></h2></td></tr><tr><tdvalign="top"><imgsrc="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_bottom.gif"style="display:block;margin:0;padding:0"width="200"height="10"alt="" /></td></tr></table>
Solution 2:
Outlook 2007 onward uses Word to render HTML. Here's an article about this, with links to more strongly-opinionated articles and websites.
Maybe you could try designing your message in Word (or Outlook itself)? Of course then it may not render properly in a sane email client.
Solution 3:
Set the height of the TD as well as any other TD that should have a fixed height:
<tdvalign="bottom"height="10"width="200">
*You should also be using width on ALL TD's in email.
Solution 4:
I've found out that Outlook is wrapping img tags with and styling a margin-top whenever they "feel" like it. You can check the html generated by saving the email as html.
Post a Comment for "Inconsistent Spaces Below Td Elements In Tables In Html Email In Outlook (2007 And 2010)"