IE9 email table bug?

Question

I have a banner image in a table (this is email so yes, coding like 1999.) IE9 is showing space around the image despite there being 1) cellpadding="0" 2) cellspacing="0" 3) there is no white space in the code between the tags and the tags 4) table width == table cell width == image width (all 600)

and the real weird kicker, when I apply hspace="0" fix, the banner goes from being aligned center (with equal 1px gaps on each side) to aligning left, despite align="center" applied to the tag. (image attached)

enter image description here

Here's the code (image path/alt has been replaced for legal reasons)

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Title here</title>
    </head>
    <body>
    <table width="600" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td colspan="3" align="center" bgcolor="#3ad1e2" style="color: #ffffff;"><img src="http://www.milya.ch/banner1.jpg" width="600" height="90" alt="a random kitteh banner" hspace="0" style="display:block;" /></td>
        </tr>
        <tr>
            <td width="15">&nbsp;</td>
            <td width="570">Some text content here</td>
            <td width="15">&nbsp;</td>
        </tr>
</table>
</body>
</html>

Unable to reproduce the problem, in any web browser or email reader, using the HTML snippet posted above. Would need more HTML and possibly a screenshot showing the problem. — Matt Coughlin
It may be the doctype declaration causing it to happen in IE9 -- appending original snippet above. — artcase
The screenshot and additional HTML is helpful. Still no sign of a problem though. Here's a set of screenshots in different browsers using Litmus. Are you using a true IE9? Are you viewing it using the exact unaltered source currently shown above (not using a version of the HTML email that was forwarded, or that was copied-and-pasted into an HTML editor)? — Matt Coughlin
I took the screenshot showing the 1px blue peeking out in IE9 Version: 9.0.8112.16421C0. The code posted above is the HTML file I opened in the browser. — artcase
@artcase Now that you've posted the colspan stuff, it makes it a little clearer. See answer below. — John

John John · Accepted Answer · 2013-05-22T17:41:32

In Outlook colspan causes some issues if the col widths are not set in the first row. You just have to add an empty row to enforce the widths.

Not sure about IE9, but this may fix your issue:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Title here</title>
    </head>
    <body>
    <table width="600" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td width="15"></td>
            <td width="570"></td>
            <td width="15"></td>
        </tr>
        <tr>
            <td colspan="3" align="center" bgcolor="#3ad1e2" style="color: #ffffff;"><img src="http://www.milya.ch/banner1.jpg" width="600" height="90" alt="a random kitteh banner" hspace="0" style="display:block;" /></td>
        </tr>
        <tr>
            <td width="15">&nbsp;</td>
            <td width="570">Some text content here</td>
            <td width="15">&nbsp;</td>
        </tr>
</table>
</body>
</html>

IE9 email table bug?

1 Answers