Emulating max-width for Outlook and older IE versions

Ever wanted to use max-width but then realised the lack of support in Outlook and older IE clients is going to ruin that plan? Well with some conditional comment magic, you can use max-width in your email templates with a graceful fallback for Outlook/IE which will work across the board. How you may ask? Keep reading on to find out how!

Unfortunately, we are going to be putting up with Outlook and older versions of Internet Explorer for a while yet, therefore its always important to maintain cross compatibility but without sacrificing a layout idea due to the lack of support for certain CSS properties in these clients.

Conditional comments with added logic

One thing that you might not think of is you can use expressions within conditional comments. Sounds like some crazy inception talk right? Well its true!

Reviewing the syntax documentation of conditional comments, you’ll notice that you can create conditional expressions. If you know programming, expressions like AND, OR, EQUAL, LESS THAN and GREATER THAN, should ring a bell. The same rules apply with conditional comments, and it just so happens that both Microsoft Office (Outlook) and Internet Explorer both can be queried by conditional comments, giving you the power to combine two conditional statements via expression logic.

Targeting Outlook and IE in one conditional comment

The magic is simply this:

<!--[if (gte mso 9)|(IE)]>
    // Outlook/IE specific stuff here!
<![endif]-->

This conditional comment means, if greater than Outlook 2000 (i.e. target all Outlook versions) OR Internet Explorer then parse this code.

The version of Internet Explorer this will target is up to IE 9. This is simply because IE 10 onwards no longer supports conditional comments.

In terms of native support, IE 8 and above supports max-width however its easier to write the conditional expression as targeting all IE versions, and because the end result will be basically the same to the end user anyway.

Implementing max-width and the fallback in an email template

An example of how to us this conditional comment.

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
    <tr>
        <td align="left" valign="top">
            <!--[if (gte mso 9)|(IE)]>
            <table border="0" cellpadding="0" cellspacing="0" width="600" style="width:600px;">
                <tr>
                    <td align="left" valign="top">
            <![endif]-->
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td align="left" valign="top">
                        <!-- Content here -->
                    </td>
               </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
                    </td>
                </tr>
            </table>
            <![endif]-->
        </td>
    </tr>
</table>

Breaking the code down

We start with a table that has a width attribute of 100%, this will work fine everywhere as its a percentage value. We then set the max-width attribute with a value of 600px. This sets the maximum width the table will go at 600 pixels. This is often done to prevent an email layout appearing full width on larger screens.

Now because Outlook and IE versions less than or equal to IE 7 do not support max-width, the additional table with a fixed with is introduced within the wrapping table that acts as a Outlook/IE specific container table within the original wrapping table. What happens here is Outlook and IE clients will see the fixed width table and display the layout content following after it, within the fixed width table.

For any email client other than Outlook or IE, the table layout will simply use the first table that has max-width set and ignore the additional fixed width table completely. Thus you have created a template using max-width with a graceful fallback for Outlook/IE.

Usage examples for this code

Why would you use this code? Here are a couple of examples:

• A fluid layout that needs the overall layout width heading off at a certain point
• A more friendly mobile layout for email clients that doesn’t support responsive design (CSS3 media query support)
• Being more friendly towards Windows Phone when rendering with the EAS client. The reasons for this can be found here and here

Overall its a useful conditional comment to use when the situation is right. I hope it is useful to you as well.