CODEWITHSUNDEEP
cssimagehtml-tablehtml-emailremoving-whitespace
Kosha Burnett
Kosha Burnett

Reputation: 47

How do I remove the white space above my images in an HTML email?

I have searched the web and this sight and tried every possible solution and still can't figure out why Outlook 2007-2013 is creating a white strip above my images.

Here is a link to the full email: http://www3.districtadministration.com/mailing/Templates/da-webinar-archives.html

Here is my code:

<table id="webinars" cellpadding="0" cellspacing="0" width="100%" style="border:1px solid #e6e6e6;">
    <tr style="background-color:#f2f2f2;border-bottom:#e6e6e6;">
        <td class="items" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#333333;line-height:20px;padding:10px;">
        <a href="[WEBINAR TITLE #1]" target="_blank" style="color:#333333;"><strong>Enter webinar title here</strong></a><br />
        Sponsored by add sponsor
        </td>

        <td width="145" align="left" class="watchnow" style="padding-left:10px;"><a href="[WEBINAR TITLE #1]" target="_blank"><img src="http://www3.districtadministration.com/mailing/webinar13/images/btn_watchnow.jpg" alt="[button] Watch Now" width="125" height="35" border="0" /></a>
        </td>
    </tr>

    <tr style="border-bottom:#e6e6e6;">
        <td class="items" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#333333;line-height:20px;padding:10px;">
        <a href="[WEBINAR TITLE #2]" target="_blank" style="color:#333333;"><strong>Enter webinar title here</strong></a><br />
        Sponsored by add sponsor
        </td>

        <td width="145" align="left" class="watchnow" style="padding-left:10px;"><a href="[WEBINAR TITLE #2]" target="_blank"><img src="http://www3.districtadministration.com/mailing/webinar13/images/btn_watchnow.jpg" alt="[button] Watch Now" width="125" height="35" border="0" /></a>
        </td>
    </tr>

    <tr style="background-color:#f2f2f2;border-bottom:#e6e6e6;">
        <td class="items" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#333333;line-height:20px;padding:10px;">
        <a href="[WEBINAR TITLE #3]" target="_blank" style="color:#333333;"><strong>Enter webinar title here</strong></a><br />
        Sponsored by add sponsor
        </td>

        <td width="145" align="left" class="watchnow" style="padding-left:10px;"><a href="[WEBINAR TITLE #3]" target="_blank"><img src="http://www3.districtadministration.com/mailing/webinar13/images/btn_watchnow.jpg" alt="[button] Watch Now" width="125" height="35" border="0" /></a>
        </td>
    </tr>

    <tr style="border-bottom:#e6e6e6;">
        <td class="items" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;color:#333333;line-height:20px;padding:10px;">
        <a href="[WEBINAR TITLE #4]" target="_blank" style="color:#333333;"><strong>Enter webinar title here</strong></a><br />
        Sponsored by add sponsor
        </td>

        <td width="145" align="left" class="watchnow" style="padding-left:10px;"><a href="[WEBINAR TITLE #4]" target="_blank"><img src="http://www3.districtadministration.com/mailing/webinar13/images/btn_watchnow.jpg" alt="[button] Watch Now" width="125" height="35" border="0" /></a>
        </td>
    </tr>
</table>

Upvotes: 0

Views: 11650

Answers (2)

Jason
Jason

Reputation: 1

<img alt="Image Description Goes Here" border="0" src="http://www.your-image-url-goes-here.jpg" 
width="600" height="176" style="padding:0px; display: block; line-height: 0px; font-size: 0px; border:0px;" 
align="top">

You need to have the ... align="top" ... code in it. This forces the image to align at the top. By setting all of the other code dimensions to 0px it specifies the white space to be 0px. Also, the display:block is very important in removing the white space as well so the browser knows how to display the layout and format of the pictures.

I tested this code and it removed the white space in Gmail, AOL, Yahoo, Hotmail, and my remote Outlook Email Account. Hopefully this helps!

Upvotes: 0

cclark413
cclark413

Reputation: 435

I believe you need to add display:block to each of your images.

Old code: <img src="http://www3.districtadministration.com/mailing/webinar13/images/btn_watchnow.jpg" alt="[button] Watch Now" width="125" height="35" border="0" />

New code: <img src="http://www3.districtadministration.com/mailing/webinar13/images/btn_watchnow.jpg" alt="[button] Watch Now" width="125" height="35" border="0" style="display:block;" />

Upvotes: 5

Related Questions