Why does IE render this HTML table differently?

Question

I'm trying to put together a simple HTML email using old school coding standards and I've hit a brick wall that I didn't foresee. Internet Explorer, even IE 11, renders a simple table differently to every other browser I've tried (Chrome, Firefox, Safari) and I can't figure out why.

In terms of layout, it should look like this (note: colours are for illustration only -- apologies to your eyes!):

But in IE it looks like this:

The HTML is pretty simple:

<table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="ffffff">
    <tr>
        <td bgcolor="#ff0000" valign="top" height="250" width='30' rowspan="3">
            Height: 250px
        </td>
        <td background="images/top_2_2a.gif" bgcolor="#00ff00" valign="top" width="455" height="42">
            Height: 42px
        </td>
        <td background="images/top_2_3a.gif" bgcolor="#0000ff" valign="top" width="135" height="116" rowspan="2">
            Height: 116px
        </td>
        <td bgcolor="#ff00ff" valign="top" height="250" width='30' rowspan="3">
            Height: 250px
        </td>
    </tr>
    <tr>
        <td background="images/top_2_2b.gif" bgcolor="#00ffff" valign="top" width="455" height="208" rowspan="2">
          <div>                            
              <div style="font-size:43px; color:#000; font-family: arial; vertical-align: bottom">
                Height: 208px
            </div>
          </div>
        </td>
    </tr>
    <tr>
        <td background="images/top_2_3b.gif" bgcolor="#ffff00" valign="top" width="135" height="134">
          <div>
          <div style="padding-bottom:0px;font-size:13px; color:#000; vertical-align: bottom;font-family: arial">
              Height: 134px
            </div>
              </div>
        </td>                            
    </tr>
</table>

JSFiddle: http://jsfiddle.net/mCLDh/

Am I doing something wrong, or is IE still messing with me after all these years?

(Note: For the commenters who are unaware, you cannot use floats or absolute positioning in HTML emails. That's why I'm using code that looks like it came from 1998. It's ugly, but it's more supported by email clients.)

Answer 1

What you are experiencing is the rowspan version of the Outlook issue pointed out here.

Nested tables are the logical choice, however, you can get your code working by adding empty cells on the left to enforce the row heights, making Outlook behave as expected.

<table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="ffffff">
    <tr>
        <td bgcolor="#ff0000" valign="top" height="42" width='0'><!-- Empty cell for outlook -->
        </td>
        <td bgcolor="#ff0000" valign="top" height="250" width='30' rowspan="3">
            Height: 250px
        </td>
        <td background="images/top_2_2a.gif" bgcolor="#00ff00" valign="top" width="455" height="42">
            Height: 42px
        </td>
        <td background="images/top_2_3a.gif" bgcolor="#0000ff" valign="top" width="135" height="116" rowspan="2">
            Height: 116px
        </td>
        <td bgcolor="#ff00ff" valign="top" height="250" width='30' rowspan="3">
            Height: 250px
        </td>
    </tr>
    <tr>
        <td bgcolor="#ff0000" valign="top" height="74" width='0'><!-- Empty cell for outlook -->
        </td>
        <td background="images/top_2_2b.gif" bgcolor="#00ffff" valign="top" width="455" height="208" rowspan="2">
          <div>
              <div style="font-size:43px; color:#000; font-family: arial; vertical-align: bottom">
                Height: 208px
            </div>
          </div>
        </td>
    </tr>
    <tr>
        <td bgcolor="#ff0000" valign="top" height="134" width='0'><!-- Empty cell for outlook -->
        </td>
        <td background="images/top_2_3b.gif" bgcolor="#ffff00" valign="top" width="135" height="134">
          <div>
          <div style="padding-bottom:0px;font-size:13px; color:#000; vertical-align: bottom;font-family: arial">
              Height: 134px
            </div>
              </div>
        </td>
    </tr>
</table>

Answer 2

Your best bet is nested tables

http://jsfiddle.net/3L8qL/1/

like so

<table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="ffffff">
    <tr>
        <td bgcolor="#ff0000" valign="top" height="250" width='30'>Height: 250px</td>
        <td>
            <table border="0" cellpadding="0" cellspacing="0" >
                <tr>
                    <td background="images/top_2_2a.gif" bgcolor="#00ff00" valign="top" width="455" height="42">Height: 42px</td>
                </tr>
                <tr>
                    <td background="images/top_2_2b.gif" bgcolor="#00ffff" valign="top" width="455" height="208" >
                        <div>
                            <div style="font-size:43px; color:#000; font-family: arial; vertical-align: bottom">Height: 208px</div>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table border="0" cellpadding="0" cellspacing="0" >
                <tr>
                    <td background="images/top_2_3a.gif" bgcolor="#0000ff" valign="top" width="135" height="116" >Height: 116px</td>
                </tr>
                <tr>
                    <td background="images/top_2_3b.gif" bgcolor="#ffff00" valign="top" width="135" height="134">
                        <div>
                            <div style="padding-bottom:0px;font-size:13px; color:#000; vertical-align: bottom;font-family: arial">Height: 134px</div>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
        <td bgcolor="#ff00ff" valign="top" height="250" width='30'>Height: 250px</td>
    </tr>
</table>

Edit:

Here's why the browser was confused.

You have created a table with 3 total rows. The sum height of all three rows is 250px.

In the second column, the first row is 42px, and the sum of the bottom two is 208px

In the third column, the first two rows is 116px, and the third row is 134px.

Which means that (table wide) the first row is defined at 42px, the third row is at 134px but the middle row is ambiguous at 166px, 92px, AND -18px at the same time.

Tables are meant to be tabular, but when you break the nature of the table, it's a crap shoot on what you'll get.

Answer 3

Ok, since you stated that it will be used for a html e-mail: do NOT use colspan, rowspan. split the table up in: (not it is NOT pretty but it will save you a metric shit-ton of problems)

<table>
    <tr>
        <td>
            250px
        </td>
        <td>
            <table>
                <tr>
                    <td>
                        height 42px
                    </td>
                </tr>
                <tr>
                    <td>
                        height 208px
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table>
                <tr>
                    <td>
                        height 116px
                    </td>
                </tr>
                <tr>
                    <td>
                        height 134px
                    </td>
                </tr>
            </table>
        </td>
        <td>
            250px
        </td>
    </tr>
</table>

(correct me if this can be done more easy, and yes, the inner tables can be replaced with divs.)

oh, and a shout out to ZURB for coming up with INK: http://zurb.com/ink/ (saved me heaps of trouble)

Answer 4

Interesting, must be minimum size thing, because if you make that value larger, it will render the same as others -- try 200 for example. But, IE doesn't make it smaller since it wants it to be the same height (or larger) than the next column.