Skip to main content
p0wer_v1olence
Inspiring
December 11, 2019
Answered

White line keeps showing up below images

  • December 11, 2019
  • 2 replies
  • 1876 views

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>&nbsp;&nbsp;&nbsp;&nbsp;
<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>&nbsp;&nbsp;•&nbsp;&nbsp;3500 Piedmont Rd., Ste. 415&nbsp;&nbsp;•&nbsp;&nbsp;Atlanta, GA 30305</p>
<p style="font-size: 12px; text-decoration: none;"><a href="@{mv_online_version}@" target="_blank">view in browser</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://francemediainc.com/privacy-policy/" target="_blank">privacy policy</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="http://interfaceconferencegroup.com/subscribe/" target="_blank">manage email preferences</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="@{forwardtoafriendlink}@">forward to a friend</a></p>
</td>
</tr>
</table>
</td>
</tr>

This topic has been closed for replies.
Correct answer Jon Fritz

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;}

2 replies

Jon Fritz
Community Expert
Jon FritzCommunity ExpertCorrect answer
Community Expert
December 11, 2019

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;}

p0wer_v1olence
Inspiring
December 11, 2019

Awesome, thank you!

p0wer_v1olence
Inspiring
December 11, 2019

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.

leslier60788689
Participant
June 23, 2022

Thank you!! This fixed my problem that I have been trying to solve for TWO days!!!! THANK YOU!!!!