CODEWITHSUNDEEP
htmlcssemailoutlook
Simon Butcher
Simon Butcher

Reputation: 11

Targeting Windows Outlook Desktop Client

I'm designing an HTML email. It's going relatively well, except for Outlook, as expected. The web-based Outlooks are fine, but I need to target the Outlook desktop clients.

I've tried variations of this code below, but it just outputs that code above the newsletter, thus failing to use it:

<!--[if mso]
<style type="text/css">
  #strip, #wrap, #header, #main_cont, #footer, #footer_content{ width: 600px !important; }
  #main_cont{ width: 600px !important; } 
  #side{ width: 196px !important; }
  #main{ width: 400px !important; } 
</style>
![endif]-->

I've also tried 'max-device-width' instead of width, but to no avail. Here's what the test screen outputs in all Outlook desktop clients: http://www.epicuploader.com/13_12_zaBlRga.jpg

I just want the Windows Outlook desktop version (Mac is fine) to render at 600px in width with the main_cont, side, and main divs to render properly as instructed too. I've looked through other topics on here, but none seem to address this particular problem.

I'm using Mailchimp too.

Upvotes: 1

Views: 1710

Answers (2)

TrojanName
TrojanName

Reputation: 5355

You may have to specify the Outlook version i.e.

<!--[if gte mso 9]>
    <style type="text/css">
    /* Your Outlook-specific CSS goes here. */
    </style>
<![endif]-->

See here for more details regarding versions (9 is Outlook 2000).

Upvotes: 0

Jarno
Jarno

Reputation: 653

I think you forgot a > after <!--[if mso] and a < before ![endif]-->:

<!--[if mso]>
<style type="text/css">
#strip, #wrap, #header, #main_cont, #footer, #footer_content{ width: 600px !important; }
#main_cont{ width: 600px !important; } 
#side{ width: 196px !important; }
#main{ width: 400px !important; } 
</style>
<![endif]-->

Upvotes: 2

Related Questions