JWOutlook Full-Width Table Cell VML Background Quirks
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:
https://litmus.com/builder/fe938d2
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!
Thanks!
A couple of hours, a few ciders in and a lot of putsmail tests later, I think I've cracked it, apart from the body margin Outlook forces, so the header doesn't actually appear right at the top of the window pane, but that's an Outlook problem to look at for another day. Potentially I could use a negative
topvalue to force the header beyond the default margin/padding, but this might be inconsistent across Outlook versions.Fixed - Header has small gap at the top:
Essentially, I've had to add an additional
<v:textbox>that wraps the header content with aninset="0,0,0,0", this has made the header content now appear correctly. So no more gaps!Fixed - Horizontal scroll bar
To solve the horizontal scroll issue, I used the cheeky trick described below, to essentially create an overlapping shape with the background colour matching (Nice one Michael!):
https://litmus.com/community/discussions/357-outlook-07-13-full-width-background-image
Looks like when using
mso-width-percent:1000;Outlook adds an extra 40 ish pixels horizontally, by using an overlapping shape with the same height and a width of20px, you can make the appearance even again and position accordingly, based onmso-position-horizontal: left | center | right;Fixed - Pink block gets cut off at the bottom
The pink block being cut off was because my maths sucks and didn't calculate the height value properly. Oops. That now appears correctly.
Regression - Faint border line appearing when using "tile" for type attribute on a
<v:fill>Finally,
<v:fill>needed to set astype="frame", usingtilecreating a faint line underneath the header, after recalculating the height.https://litmus.com/builder/c8ea4ad
You rock dude. Thank you.
Hi people!
I tried the James' solution but I couldn't make it work in Outlook 2007 (I was getting the horizontal scrollbar even with that new v:rect element at the the bottom of the code), so I removed this v:rect element and set up the mso-width-percent property to 984. This is the final code I used:
I hope this can be useful to other colleagues too!
Thank you all!
Hi James! This is an interesting challenge. But unfortunately I'm no VML expert. However, I'm not sure your example requires background images and VML in the first place. Here's another version I made of your email without background images (and here's the code). This still needs a few tweaks to fully match your mobile version, and to make it look better on Outlook 2003 or Lotus Notes (if you'd still need full support for these clients). But I hope the idea can help you.
Hi Remi!
This is an interesting approach! Thanks for posting that code. I still have to support Outlook Desktop (2003 - 2016) clients unfortunately, but I've never supported Lotus Notes, so that's not an issue.
I managed to actually work out the VML background issues with the tweaks posted above, but I'll certainly look into the method you've posted as an alternative approach, that's no reliant on background images, thanks again!
I'll have to agree with Rémi here. You could save a lot of trouble by using background colors instead of an image.
In any case, you'll want to add this before closing the textbox to prevent an additional gap below your rect.
<p style="margin:0; font-size:0; line-height:0;"><o:p xmlns:o="urn:schemas-microsoft-com:office:office"> </o:p></p>Also you can prevent the line below your tiling background by defining the image size:
<v:fill type="tile" src="http://i.emlfiles.com/cmpimg/5/8/9/2/2/1/files/752824_headerbg.jpg" color="#2d3d4a" size="width:1px,height:127px" />With your current image stretching obviously works as well, though.
Curious thing about the horizontal gap: It actually gets wider as the rect gets higher, starting at some seemingly random height. This can actually lead to some sections being indented more than others if you're using multiple full width backgrounds.
Finally, your preheader is causing an extra gap at the top. I'm not sure why precisely right now, but my guess would be the missing line-height-fix.
Here's what I use
Hi Leo,
Thanks for your insight!
Good tip on the additional gap on the vrect, and I didn't think to specifying CSS properties on the
<v:fill>!Regarding the preheader. I've not used
mso-line-height-rule: exactly;before on the<span>because its not a block level element and I've had mixed results with it actually doing anything in the past (even on table cells), but I can certainly apply it. Though isn't there still the default margin/padding in the window pane that Outlook creates anyway? You can never remove all of the spacing if I remember correctly?Edit: Ah I see the
<span>is creating extra spacing at the top. I'll look at adjusting the code that collapses the space better! Looks like switching the container to a<div>is friendlier to Outlook. I guess I've never really noticed this that much as most email templates we've done never really look for pixel perfect at the top part.Thanks again!
Yes. Maybe someone here will correct me, but i never managed to get rid of a small 1px high line in Outlook, as you'll see when you test my snippet. But if you give everything the same color as the background, it's really only noticable if you know its there, if at all.
Line-height is only used in block elements (or similar - like a td), not inline elements (like a span). Unfortunately even in the td you'll notice it being interpreted differently in Outlook, especially at bigger font-sizes.