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)
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"> </td>
<td width="570">Some text content here</td>
<td width="15"> </td>
</tr>
</table>
</body>
</html>
1 answers
solution1
1 ACCPTED 2013-05-22 17: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"> </td>
<td width="570">Some text content here</td>
<td width="15"> </td>
</tr>
</table>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.