2

Long story short, I'm making an HTML email (yeah, I know). I've got it to the point where it looks great in GMail, Yahoo Mail, Thunderbird and Outlook 2003 (haven't tested 07...). The only hiccup is Hotmail (Windows Live Mail). The fact that it doesn't support background images at all doesn't bother me with regards to my layout...it's that because of the layout, I need to set the width of the table to be a set value (550px) instead of a percentage (80%) or else my header image will just be floating in space and looks ugly.

So I now have two options as I see it - make a Hotmail-specific css rule to set the width as a static value (I don't know if this is possible) or to have my mailer template get modified on the fly based on whether or not the recipient belongs to '@hotmail.com'. I'd prefer the former rather than the latter.

Clarification: To keep it simple, imagine a 550px wide by 150px high div. It has a background image with repeat-x. Inside that div, I have an img which is 150px high and 550px wide. If the outer div is set to 80% of the viewport, it should expand to the left and thus expose the repeating background. This is what's expected. Since Hotmail doesn't show background images, it's just a blank white space.

Further clarification: Go here to see an example of what I mean.

SnakeWasTheNameTheyGaveMe
  • 2,522
  • 2
  • 28
  • 70
  • CSS is less supported in outlook/hotmail newsletters. So better option is that you must use instead of background image – Ahsan Rathod Jun 23 '11 at 16:45
  • You should check [this out](http://www.campaignmonitor.com/design-guidelines/) it has some pretty neat tips for designing html emails. – Steve Day Jun 23 '11 at 18:00
  • Sorry I might have misled you a bit - I have a background image which normally repeats-x, but when it isn't there, my regular header image (which is never a background image) looks like it's floating in white space. I'll fix the original question to reflect this. – SnakeWasTheNameTheyGaveMe Jun 23 '11 at 20:31
  • It's going to look like that in Outlook 2007 too. You really should be using absolute widths and a background-color that kicks in when background-image isn't supported. This isn't going to work otherwise. – Thomas Jun 23 '11 at 21:00
  • @Steve Day - looking at your link, the part about "Provide fallback colors for background images" states almost exactly my problem. But my solution isn't to provide a color fallback - it's to explicitly set the width of the container. Due to the way the header image is set, providing a color fallback doesn't yield pleasing results. – SnakeWasTheNameTheyGaveMe Jun 23 '11 at 21:02

3 Answers3

1

Try putting this in every image tag:

style="display: block"

You can't have different CSS as it's all supposed to be inline. You should also be using tables (I know, I know). If you could post some source, I could help a little further.

Thomas
  • 231
  • 4
  • 13
0

In the end I had to modify my email right before sending based on a custom rules list (regex replace based on domain).

SnakeWasTheNameTheyGaveMe
  • 2,522
  • 2
  • 28
  • 70
0

I know it's old question but it might be of use to people still struggling with web and windows outlook and windows mail.

I found a way to hide elements specifically from windows outlook and mail app:

<span style="mso-element:field-begin;"></span>
 Content to hide from Outlook 
<span style="mso-element:field-end;"></span>

reference this great blog.

also you could target all outlook apps (mobile, web, desktop) as:

<!--[if mso]> 
    <div> Your content that you want visible </div>            
<![endif]-->

you could also invert it with other conditions and target specific versions, something like:

<!--[if !mso]> Everything not mso (outlook or windows mail) <![endif]-->
<!--[if gte mso 16]> All mso versions that are greater than 16 <![endif]-->

more on that on this link.

As for displaying backgound images in desktop/windows versions of outlook (mail app and outlook ms) you can use VML and more about that you can find here.

Kerim092
  • 1,367
  • 1
  • 12
  • 32