How do I fix fluid layout email for IE?

Question

I am working on some emails with responsive layouts. They work in most cases but some versions of IE create various errors. The email appears blank, but content is just centered in a huge window (I assume it is the maximum size the email clients will allow). How do I restrict the email size for IE if max-width is not an option? Thanks!

Here is a sample of what I have at the moment:

<!DOCTYPE html>
<html>
 <head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<title>Email</title>
<style type="text/css">
@media only screen and (min-device-width: 541px) {
  .content {
    width: 540px !important;
  }
  }
</style>
</head>
<body>
<!--[if (gte mso 9)|(IE)]>
<table width="540" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
  <td>
<![endif]-->
<table bgcolor="#e4e4e4" width="100%" cellpadding="0" cellspacing="0" style="margin:0;">
 <tbody>
  <tr>
   <td bgcolor="#acacac" width="100%" cellspacing="0" style="margin:0; padding-left:5%;">
<!--The guts of the email...-->
</td>
</tr>
</tbody>
</table>


<!--[if (gte mso 9)|(IE)]>
  </td>
</tr>
</table>
<![endif]-->
 </body>
</html>

score 0 · Answer 1 · answered May 07 '14 at 21:15

There are at least couple of ways you can get your emails to be responsive or adaptive.

The first method is to create separate tables for each "column" and have them wrap when your container is too narrow to fit both. (See example 1)

The second method is to create columns in tables, like you normally would, and set the display to block when you want them to collapse into rows. (See example 2)

Example 1:

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" name="viewport" content="text/html; charset=utf-8; initial-scale=1" />
        <title>Method 1</title>
        <style type="text/css">
          @media only screen and (max-width:600px) {
            table[class=container], table[class=responsiveTable] {width: 100% !important;}
          }
        </style>
      </head>
      <body>
        <table class="container" border="0" cellspacing="0" cellpadding="0" width="600" align="center">
          <tr>
            <td>
              <table class="responsiveTable" border="0" cellspacing="0" cellpadding="0" width="50%" align="left">
                <tr>
                  <td bgcolor="#dddddd" align="center">FIRST COLUMN</td>
                </tr>
              </table>
              <table class="responsiveTable" border="0" cellspacing="0" cellpadding="0" width="50%" align="left">
                <tr>
                  <td bgcolor="#aaaaaa" align="center">SECOND COLUMN</td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </body>
    </html>

Example 2:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" name="viewport" content="text/html; charset=utf-8; initial-scale=1" />
        <title>Method 2</title>
        <style type="text/css">
          @media only screen and (max-width:600px) {
            table[class=container], td[class=responsiveCell] {width: 100% !important;}
            td[class=responsiveCell] {display: block !important;}
          }
        </style>
      </head>
      <body>
        <table class="container" border="0" cellspacing="0" cellpadding="0" width="600" align="center">
          <tr>
            <td>
              <table border="0" cellspacing="0" cellpadding="0" width="100%">
                <tr>
                  <td class="responsiveCell" bgcolor="#dddddd" width="50%" align="center">FIRST COLUMN</td>
                  <td class="responsiveCell" bgcolor="#aaaaaa" width="50%" align="center">SECOND COLUMN</td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </body>
    </html>

How do I fix fluid layout email for IE?

1 Answers1