White space / border won't disappear in tr table
I have this newsletter mailing list:
<table width="600" align="center" cellpadding="0" style="font-family:verdana,'Myriad Pro', Arial; border-collapse:collapse; border-spacing:0;">
<tr valign="bottom" height="127" style="padding:0;text-align:left;vertical-align:bottom;margin:0;margin-bottom:-2px;" >
<td height="141" valign="bottom">
<img width="608" height="141" src="http://toniweb.us/m/demos/headPildoraLarge.png" />
</td>
</tr>
<tr>
/*Rest of table ommited*/
</tr>
The thing is, after the <tr>
containing headPildoraLarge.png img, there is a ~ 2px space at the bottom, which I cannot remove ...
This can be seen in Outlook IE 5,6,7 (not in FF, IE8 or others), but in this case it's a tarjet ....
How can I remove the space?
Full HTML in Action: http://toniweb.us/m/demos/
Write this in your css:
img{
border:0;
vertical-align:top;
}
just add vertical-align: bottom
this image to your stylesheet - something like:
td img {
vertical-align: bottom;
}
for more information, read this great article . the break you see is the difference between the baseline and the bottomline of the font, as by default images are anchored to the baseline by default.
Try to give the style below in the image
<img width="608" height="141" src="http://toniweb.us/m/demos/headPildoraLarge.png" style="vertical-align:bottom;" />