So recently I decided to build a new email template that matches the recently redesigned corporate website of the company I work for. Part of this new layout involved a new header. In order to replicate it in email form, a full width background is required. CHALLENGE!

As all developers know, Outlook Desktop (Windows) is a pain in the butt, and thankfully its usage is less and less these days, so its less of a priority, but I did notice some interesting quirks when I implemented VML background code compared to the standard HTML implementation. I'm reaching out to any VML experts out there to help debug and understand why the rendering is a little bit off and potentially what can be adjusted to fix it. The code for the header can be found below:

Notable Outlook VML issues:

  • Pink block is pushed down several pixels, rather than being positioned at the top of the cell where the background is. (Note the gap)
  • Pink block has been cut off at the bottom, so not all of the block is actually visible (relative to the centre positioning of the logo)
  • The web version link appears slightly off. (Appears slightly pushed down towards the white part of the header)
  • Use of mso-width-percent:1000; has caused a hortizontal scrollbar to appear.

This of course is all on the VML implementation, the plain HTML code works fine.

In order for the pink block to appear over the top of the background, I've used a <v:rect> that wraps around the entire header table with a <v:fill>. This allows the background image to work while overlaying other elements, but seems to be the main reason why some of the weird issues occur, but I don't know if there is an alternative method here?

To improve the rendering of the pink block, I could serve it as an entire image for Outlook, but I'd rather try and avoid that, the layout is full of mso conditionals as it is!

In addition the header itself seems to be push down slightly by the body margin, which I'm aware Outlook creates, is there anyway to neutralise this at all? I originally thought of making the top value on the VML negative, but this is inconsistent in Outlook 2007, 2010, 2013 from inbox tests.

Any developer thoughts/input welcome!