CODEWITHSUNDEEP
htmlinternet-explorer-9html-email
artcase
artcase

Reputation: 312

IE9 email table bug?

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>

Upvotes: 0

Views: 144

Answers (1)

John
John

Reputation: 12193

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>

Upvotes: 1

Related Questions