css - AOL adding spaces between images in HTML Emails -
i have built email tables client, when test in aol, padding added between images. looks 3px space being added right of each image... here code:
<table border="0" cellspacing="0" cellpadding="0" align="center" width="700" valign="top"> <tr> <td> <img src="images/nav-gaming.jpg" align="left" style="display:block; vertical-align:bottom" width="104" height="33" border="0" /> <img src="images/nav-poker.jpg" align="left" style="display:block; vertical-align:bottom" width="104" height="33" border="0" /> <img src="images/nav-restaurant.jpg" align="left" style="display:block; vertical-align:bottom" width="102" height="33" border="0" /> <img src="images/nav-tanzibar.jpg" align="left" style="display:block; vertical-align:bottom" width="92" height="33" border="0" /> <img src="images/nav-events.jpg" align="left" style="display:block; vertical-align:bottom" width="82" height="33" border="0" /> <img src="images/nav-packages.jpg" align="left" style="display:block; vertical-align:bottom" width="96" height="33" border="0" /> <img src="images/nav-rewards.jpg" align="left" style="display:block; vertical-align:bottom" width="120" height="33" border="0" /> </td> </tr> </table>
have missed blindingly obvious? have tested adding each image new td in table, results in same issue.
it safer put images own table cells:
<table border="0" cellspacing="0" cellpadding="0" width="700"> <tr> <td> <img src="images/nav-gaming.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="104" height="33" border="0" /> </td> <td> <img src="images/nav-poker.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="104" height="33" border="0" /> </td> <td> <img src="images/nav-restaurant.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="102" height="33" border="0" /> </td> <td> <img src="images/nav-tanzibar.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="92" height="33" border="0" /> </td> <td> <img src="images/nav-events.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="82" height="33" border="0" /> </td> <td> <img src="images/nav-packages.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="96" height="33" border="0" /> </td> <td> <img src="images/nav-rewards.jpg" align="left" style="margin: 0; border: 0; padding: 0; display: block;" width="120" height="33" border="0" /> </td> </tr> </table>
only exception if trying float images (to float need remove display:block;
). floating can problematic unless have plenty of spare room in table cell.
Comments
Post a Comment