Copy link to clipboard
Copied
Why is there a white line below the conference panel image (and above the footer)? How do I resolve/fix this issue? I thought my code prevented any padding, but apparently that is not the case. Any help is appreciated, thanks!
Image:
Code:
</tr>
<tr>
<td align="center">
<img src="http://francemediaincftp.cloudaccess.net/IF20/IFC-Panel-Web.jpg" class="img-max fadeimg" alt="InterFace Conference Panel">
</td>
</tr>
<tr>
<td bgcolor="#000000" align="center" style="padding: 20px 0 10px 0;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td id="body3" align="center" style="font-size: 16px; line-height: 26px; font-family: Helvetica, Arial, sans-serif; color: #ffffff;">
<a href="https://twitter.com/interfacegroup" target="_blank"><img src="http://francemediaincftp.cloudaccess.net/IF19/twitter-white.png" width="30" height="30"></a>
<a href="https://www.linkedin.com/showcase/interface-france-media/" target="_blank"><img src="http://francemediaincftp.cloudaccess.net/IF19/linkedin-white.png" width="30" height="30"></a>
<p>InterFace Conference Group is a division of France Media, Inc.<br><a href="http://www.francemediainc.com">France Media, Inc.</a> • 3500 Piedmont Rd., Ste. 415 • Atlanta, GA 30305</p>
<p style="font-size: 12px; text-decoration: none;"><a href="@{mv_online_version}@" target="_blank">view in browser</a> | <a href="http://francemediainc.com/privacy-policy/" target="_blank">privacy policy</a> | <a href="http://interfaceconferencegroup.com/subscribe/" target="_blank">manage email preferences</a> | <a href="@{forwardtoafriendlink}@">forward to a friend</a></p>
</td>
</tr>
</table>
</td>
</tr>
That looks to me like the default text descender padding under html 5 that browsers add to images.
You should be able to remove it by adding this to the top of your CSS stylesheet...
img {vertical-align:bottom;}
Copy link to clipboard
Copied
Well, it looks like replacing the <tr> tag in the image section with "<tr style="line-height: 1px;">" might do the trick. Hope you all find this helpful if you were having a similar issue.
Copy link to clipboard
Copied
Thank you!! This fixed my problem that I have been trying to solve for TWO days!!!! THANK YOU!!!!
Copy link to clipboard
Copied
That looks to me like the default text descender padding under html 5 that browsers add to images.
You should be able to remove it by adding this to the top of your CSS stylesheet...
img {vertical-align:bottom;}
Copy link to clipboard
Copied
Awesome, thank you!