CODEWITHSUNDEEP
htmlcssemailoutlook
Chris
Chris

Reputation: 514

HTML email background breaking layout in Outlook - using vml method

Currently using http://backgrounds.cm method for background email generation. When not using the code, the email looks correct in most test. When the background image is added, Outlook 2013 will display it, but all the table formating expands to 100%. Not sure if I'm implementing it incorrectly.

Currently applying the background to the topmost table which contains several cells, not the entire body.

I've pasted the code here: http://pastebin.com/dX8zEZDV

Upvotes: 0

Views: 685

Answers (2)

revelt
revelt

Reputation: 2410

If table formatting expands to 100%, it's because you set "Table cell width" setting to "Full email width". It's best to use VML background images on fixed width and height table cells.

Ideal settings for backgrounds.cm are "A single table cell" and set width and height. Otherwise, the result might look different from non-Outlook clients (sometimes it's still OK if it's agreed upfront with stakeholders).

Upvotes: 0

josh1978
josh1978

Reputation: 748

I did a couple things to fix it:

  • Changed your doctype from strict to transitional.
  • Removed duplicate meta tags.
  • Closed all unclosed-tags (img and br tags).
  • Removed your outer two containing tables (#container_table and #container_wrapper).
  • In #container_table, removed min-width, added margin:0 auto and align="center" so table is centered.
  • In VML code section, replaced mso-width-percent:1000 to width:850px.
  • Updated closing VML tags to correct nesting order (closed prematurely).

Optional:

  • In VML code section, changed the color to better match your background (#292929).

The only instance I've found where VML background images and the inline fallbacks don't work is when I view my Outlook email using the Gmail app on Android. However, when I view my [email protected] email in the same app, it's fine. So in the event the background image doesn't load, the bgcolor will display so your users can still see your white text.

Note: Always remember to validate your code. Even if there are some errors you can't fix (for instance the background attribute in the td won't validate), you can verify all your tags (minus any VML code) are nested/closed properly, as well as finding any accidental special characters you may have copied into your code from Photoshop or Word.

Updated source at jsfiddle: link

Upvotes: 2

Related Questions