Target Windows Live Mail with specific css

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 a开发者_如何学运维ll 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.

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.

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

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.