I am working on a html-email which shows a table (660px) which contains a filled grid of multiple nested tables (210px) or 'photo-slides' all with attribute align="left". This works in all browsers and email-clients, except Outlook.com/IE8/XP. Instead, the slides will be shown there on one long horizontal bar of endless slides and force the outer table to expand horizontally! The correct way should be that the slides automatically form a nice grid of themselves by the maximum amount of 3 slides on each new line by expanding downwards (like in any webpage happens).
The html attribute align="left" is used, because MS Outlook 2007 will ignore the "float" styles. I have made a test with Litmus and strangely it works fine in Outlook.com, but they probably run on Windows 7/8. I discovered that a marketshare of 30% in the world still uses Windows XP, though.
Can somebody help improving this html?
Here is the link: http://www.kevin.nl/test/email_grid.html
<!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">
<html>
<head>
<title>HTML-Email with grid</title>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html {height:100%;width:100%}
body {background-color:#ffffff;height:100%;}
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}
table {border-collapse: collapse;}
.ExternalClass, .ExternalClass p, .ExternalClass span,
.ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;}
.ExternalClass * {line-height: 100%;}
table tr td {mso-line-height-rule: exactly;}
</style>
</head>
<body bgcolor="#ffffff" text="#666666" link="#1f8a92" vlink="#1f8a92" alink="#1f8a92">
<table border="0" cellspacing="0" cellpadding=0 width="100%" bgColor="#ffffff">
<tr>
<td align="center" valign="top" bgColor="#ffffff">
<table width="660" border="0" cellspacing="0" cellpadding="10">
<tr>
<td align="left" valign="top" style="font-size:18px; line-height:24px; font-family:Arial, Helvetica, sans-serif; color: #999999;font-weight: bold;"><font color="#666666" face="Arial, Helvetica, sans-serif" style="font-size:18px; line-height:24px; font-weight: bold; color: #666666;">HTML-Email: table (660px) with a filling grid of a variable amount of nested smaller tables (210px) or 'photoslides' with attribute align="left"</font></td>
</tr>
<tr>
<td align="left" valign="top" style="font-size:12px; line-height:18px; font-family:Arial, Helvetica, sans-serif; color: #666666;"><font color="#666666" face="Arial, Helvetica, sans-serif" style="font-size:12px;line-height:18px">This works in all browsers and emailclients, except Outlook.com (2013) in combination with IE8 (running Windows XP). Instead, the slides will be shown on one long horizontal bar of endless slides and force the outer table as well to expand horizontally! The correct way should be that the slides automatically form a nice grid of themselves by the maximum amount of 3 slides on each new line by growing downwards (like in any webpage happens).<br />
The html attribute align="left" is used, because MS Outlook 2007
will ignore the "float"-styles.<br />
<br>
</font></td>
</tr>
</table>
<table width="660" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="660" align="left" valign="top">
<!-- slide begin -->
<table width="210" border="0" cellpadding="9" cellspacing="0" align="left" style="float:left;display: inline;">
<tr>
<td width="190" height="200" bgcolor="#FFFFFF"><table width="190" border="0" cellpadding="9" cellspacing="0">
<tr>
<td width="190" height="200" align="center" valign="middle" bgcolor="#f3f3f3"><a href="#"><img src="http://www.kevin.nl/test/img/flower170px.jpg" width="170" height="128" border="0" style="display:block"></a></td>
</tr>
</table></td>
</tr></table>
<!-- slide end -->
<!-- slide begin -->
<table width="210" border="0" cellpadding="9" cellspacing="0" align="left" style="float:left;display: inline;">
<tr>
<td width="190" height="200" bgcolor="#FFFFFF"><table width="190" border="0" cellpadding="9" cellspacing="0">
<tr>
<td width="190" height="200" align="center" valign="middle" bgcolor="#f3f3f3"><a href="#"><img src="http://www.kevin.nl/test/img/flower170px.jpg" width="170" height="128" border="0" style="display:block"></a></td>
</tr>
</table></td>
</tr></table>
<!-- slide end -->
<!-- slide begin -->
<table width="210" border="0" cellpadding="9" cellspacing="0" align="left" style="float:left;display: inline;">
<tr>
<td width="190" height="200" bgcolor="#FFFFFF"><table width="190" border="0" cellpadding="9" cellspacing="0">
<tr>
<td width="190" height="200" align="center" valign="middle" bgcolor="#f3f3f3"><a href="#"><img src="http://www.kevin.nl/test/img/flower170px.jpg" width="170" height="128" border="0" style="display:block"></a></td>
</tr>
</table></td>
</tr></table>
<!-- slide end -->
<!-- slide begin -->
<table width="210" border="0" cellpadding="9" cellspacing="0" align="left" style="float:left;display: inline;">
<tr>
<td width="190" height="200" bgcolor="#FFFFFF"><table width="190" border="0" cellpadding="9" cellspacing="0">
<tr>
<td width="190" height="200" align="center" valign="middle" bgcolor="#f3f3f3"><a href="#"><img src="http://www.kevin.nl/test/img/flower170px.jpg" width="170" height="128" border="0" style="display:block"></a></td>
</tr>
</table></td>
</tr></table>
<!-- slide end -->
<!-- slide begin -->
<table width="210" border="0" cellpadding="9" cellspacing="0" align="left" style="float:left;display: inline;">
<tr>
<td width="190" height="200" bgcolor="#FFFFFF"><table width="190" border="0" cellpadding="9" cellspacing="0">
<tr>
<td width="190" height="200" align="center" valign="middle" bgcolor="#f3f3f3"><a href="#"><img src="http://www.kevin.nl/test/img/flower170px.jpg" width="170" height="128" border="0" style="display:block"></a></td>
</tr>
</table></td>
</tr></table>
<!-- slide end -->
<!-- slide begin -->
<table width="210" border="0" cellpadding="9" cellspacing="0" align="left" style="float:left;display: inline;">
<tr>
<td width="190" height="200" bgcolor="#FFFFFF"><table width="190" border="0" cellpadding="9" cellspacing="0">
<tr>
<td width="190" height="200" align="center" valign="middle" bgcolor="#f3f3f3"><a href="#"><img src="http://www.kevin.nl/test/img/flower170px.jpg" width="170" height="128" border="0" style="display:block"></a></td>
</tr>
</table></td>
</tr></table>
<!-- slide end -->
<!-- slide begin -->
<table width="210" border="0" cellpadding="9" cellspacing="0" align="left" style="float:left;display: inline;">
<tr>
<td width="190" height="200" bgcolor="#FFFFFF"><table width="190" border="0" cellpadding="9" cellspacing="0">
<tr>
<td width="190" height="200" align="center" valign="middle" bgcolor="#f3f3f3"><a href="#"><img src="http://www.kevin.nl/test/img/flower170px.jpg" width="170" height="128" border="0" style="display:block"></a></td>
</tr>
</table></td>
</tr></table>
<!-- slide end -->
<!-- slide begin -->
<table width="210" border="0" cellpadding="9" cellspacing="0" align="left" style="float:left;display: inline;">
<tr>
<td width="190" height="200" bgcolor="#FFFFFF"><table width="190" border="0" cellpadding="9" cellspacing="0">
<tr>
<td width="190" height="200" align="center" valign="middle" bgcolor="#f3f3f3"><a href="#"><img src="http://www.kevin.nl/test/img/flower170px.jpg" width="170" height="128" border="0" style="display:block"></a></td>
</tr>
</table></td>
</tr></table>
<!-- slide end -->
<!-- slide begin -->
<table width="210" border="0" cellpadding="9" cellspacing="0" align="left" style="float:left;display: inline;">
<tr>
<td width="190" height="200" bgcolor="#FFFFFF"><table width="190" border="0" cellpadding="9" cellspacing="0">
<tr>
<td width="190" height="200" align="center" valign="middle" bgcolor="#f3f3f3"><a href="#"><img src="http://www.kevin.nl/test/img/flower170px.jpg" width="170" height="128" border="0" style="display:block"></a></td>
</tr>
</table></td>
</tr></table>
<!-- slide end -->
</td>
</tr>
</table>
<br>
</td>
</tr>
</table>
</body>
</html>
