Highlighted

White line keeps showing up below images

Community Beginner ,
Dec 11, 2019

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:

 

Screen Shot 2019-12-11 at 8.08.37 AM.png

 

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>

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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

TOPICS
Code, How to, Other

Views

424

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

White line keeps showing up below images

Community Beginner ,
Dec 11, 2019

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:

 

Screen Shot 2019-12-11 at 8.08.37 AM.png

 

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>

Adobe Community Professional
Correct answer by Jon Fritz II | Adobe Community Professional

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

TOPICS
Code, How to, Other

Views

425

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Dec 11, 2019 0
Community Beginner ,
Dec 11, 2019

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 11, 2019 0
Adobe Community Professional ,
Dec 11, 2019

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 11, 2019 1
Community Beginner ,
Dec 11, 2019

Copy link to clipboard

Copied

Awesome, thank you!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 11, 2019 0