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.

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.

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

Share This:

I am trying to display border-right in a and it is not displayed in Outlook 2000. I know that earlier versions of Outlook until Outlook 2007 have a problem with right hand border. Is there a fix for this issue?

Regards,

Estela

Pandorica

border-right should definitely work in Outlook 2003 and lower as its the IE engine and as is a block element, this should equally work fine. How are you writing the CSS property of border-right?