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!):

enter image description here

But in IE it looks like this:

enter image description here

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.)

+1 to *is IE still messing with me after all these years?* Maybe it is! — Ranveer, Dec 18 '13 at 19:44
W3C Browser Standards are things with which many browser development teams comply. W3C Browser Standards appear as humours comics in the offices of IE developers. — DwB, Dec 18 '13 at 19:45
Based on your desired output, I don't necessarily think a table is the proper element to use in this situation. — jeffjenx, Dec 18 '13 at 19:46
Positioned divs or other, semantically appropriate block-level elements. — jeffjenx, Dec 18 '13 at 19:48
@MrSlayer I'm still waiting to understand what type of positioning you're referring to. Thanks. — Chuck Le Butt, Dec 18 '13 at 19:56
Yes, using absolutely positioned divs inside of a container may be more appropriate, but you could also use floats for the perceived sidebars. — jeffjenx, Dec 18 '13 at 19:57
@Don The document is in HTML4 -- "depreciated" still means it should work. It doesn't. But to prove a point, I placed inline styles of "height" on every TD. The result was exactly the same. — Chuck Le Butt, Dec 18 '13 at 19:58
@MrSlayer I'd LOVE to use floats (not so much the absolute positioning) but I can't -- because this is a HTML email. Those things are not supported in the majority of email clients. That's the only reason I'm using horrible, ugly old school code. — Chuck Le Butt, Dec 18 '13 at 19:59
@TheMonk Just remove the `height="250"` attribute from *left* and *right* columns ;) — Hashem Qolami, Dec 18 '13 at 20:09
@HashemQolami That does nothing: http://jsfiddle.net/mCLDh/1/ — Chuck Le Butt, Dec 18 '13 at 20:23
@TheMonk Deprecated means that it is not guaranteed to be supported in the future. And you sort of argued my case in that doing it to the current standards yields the same results so... it should be done that way. It was just a comment to make sure you're aware — Don, Dec 18 '13 at 20:34

score 2 · Answer 1 · edited May 23 '17 at 10:10

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>

score 1 · Answer 2 · answered Dec 18 '13 at 20:00

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)

The problem is actually coming from viewing the email in webbased mail clients in IE -- it works most other places, strangely enough. I can't believe that IE11 renders it wrong... :-/ — Chuck Le Butt, Dec 18 '13 at 20:05

Smeegs · Accepted Answer · 2013-12-18T20:13:36.390

1

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.

edited Dec 18 '13 at 20:13

answered Dec 18 '13 at 20:03

Smeegs

9,151
5
42
78

Argh. I can't believe it IS Internet Explorer messing with me. What's that about? :( – Chuck Le Butt Dec 18 '13 at 20:07
IE isn't messing with you. Tables are supposed to be tabular. You're creating ambiguous row heights broken into uneven combinations of 3 possible non-matching heights. I updated my answer to explain this in more detail. – Smeegs Dec 18 '13 at 20:14
That helps a lot, thanks. Still strange that this behaviour wasn't standardized 10 years ago by the W3C. – Chuck Le Butt Dec 18 '13 at 20:22
1

@TheMonk The W3C DID finalize this years ago. You already know that IE is the only browser not rendering this the same as any other. So why are you needing to "fix" you markup just for IE? Doesn't that show us IE is the problem and not your markup? Of course it does! You can never, EVER trust IE to do ANYTHING right. – Rob Dec 18 '13 at 20:27
@Rob The markup doesn't follow standards. If you have non-standard markup, the results won't be standardized. And even if the do work now, they may not work with browser updates. That's why standards exist. IE isn't messing with him. The other browsers are just better at interpreting what he meant to do. And browsers DO know that tables are only meant for tabular data. That's the purpose of them. – Smeegs Dec 18 '13 at 20:34
I agree validation can mess up a browser but when 3 out of 4 get it right, and IE is always the one that gets it wrong, I'll question IE over anyone's markup any time. – Rob Dec 18 '13 at 20:38
Some browsers are better at interpreting intent than others. But that can change. Which is why it's always good to follow standards. Then you don't have to run around and fix markup in all your pages when the new firefox breaks everything. IE has a well-earned reputation of not following standards. But with IE11, if it doesn't work, you're probably doing something you shouldn't be. – Smeegs Dec 18 '13 at 20:40
@Smeegs The markup DOES follow standards and does have logic. Every time you use a `colspan` or a `rowspan` it introduces an ambiguity. W3C standards are there to agree on how to handle those situations, which is how the ambiguity is removed. This is true for all HTML and CSS. The table may be somewhat complicated, but it's not outside the realm of possibility that such a shape might be required for tabular data (not every table made up of identical rectangles - that's why `colspan` and `rowspan` exist in the first place). Thanks again for your help. – Chuck Le Butt Dec 19 '13 at 15:04
1

I didn't mean to offend you, but the table you created is not standard. The proper use of `colspan` and `rowspan` should never introduce ambiguity. Rows and columns should have defined table wide dimensions. That's a standard table. When you introduce a span, you should just be combining two cells. And that merged cell should just the be sum of the table wide row/column defined dimensions. Excel is a great tool to show how it should work. Open excel and merge cells together. That's what spans are "supposed" to be, just merge cells. – Smeegs Dec 19 '13 at 15:12

score 0 · Answer 4 · answered Dec 18 '13 at 19:51

0

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.

answered Dec 18 '13 at 19:51

raddevus

8,142
7
66
87

Why does IE render this HTML table differently?

4 Answers4

Linked