CODEWITHSUNDEEP
htmlemailtemplateswhitespace
Fernando Filipe
Fernando Filipe

Reputation: 1

White spaces between images in HTML email

I am working on a HTML email template. For some reason, there are white spaces to the left of the images in outlook and bellow the images in gmail.

I have tried many of the suggestions listed here to no prevail.

Here is some of code I am referring too:

<tr>
    <td colspan="12">
        <img src="http://www.antequera-inland.com/email-template/images/_01.gif" width="600" height="172" alt=""/></td>
</tr>
<tr>
    <td colspan="4" rowspan="4">
        <img src="http://www.antequera-inland.com/email-template/images/_02.gif" width="348" height="120" alt=""/></td>
    <td colspan="7">
        <a href="http://www.skype.com" title="Chat or call us via Skype" target="_blank"
            onmouseover="window.status='Chat or call us via Skype';  return true;"
            onmouseout="window.status='';  return true;">
            <img src="http://www.antequera-inland.com/email-template/images/skype-link.gif" alt="Chat or call us via Skype" name="Chat-or-call-us-via-Skype" width="233" height="26" border="0" /></a></td>
    <td rowspan="12">
        <img src="http://www.antequera-inland.com/email-template/images/_04.gif" width="19" height="591" alt=""/></td>
</tr>
<tr>
    <td colspan="7">
        <a href="mailto:[email protected]" title="Send us as email" target="_blank"
            onmouseover="window.status='Send us as email';  return true;"
            onmouseout="window.status='';  return true;">
            <img src="http://www.antequera-inland.com/email-template/images/Email-Steve.gif" alt="Send us as email" name="Send-us-as-email" width="233" height="22" border="0" /></a></td>
</tr>
<tr>
    <td colspan="7">
        <a href="http://www.antequera-inland.com" title="Visit Antequera Inland website" target="_blank"
            onmouseover="window.status='Visit Antequera Inland website';  return true;"
            onmouseout="window.status='';  return true;">
            <img src="http://www.antequera-inland.com/email-template/images/www.antequera-inland.com.gif" alt="Visit Antequera Inland website" name="Visit-Antequera-Inland-website" width="233" height="23" border="0" /></a></td>
</tr>

Any assistance is very much appreciated.

Regards.

Upvotes: 0

Views: 13039

Answers (4)

javaBean007
javaBean007

Reputation: 565

Sometimes adding "display: block" to the img tag alone doesn't always work. Try removing padding and setting a low line height around the img's container. As in:

<td style="background-color: #a3a5a8; padding: 0; line-height: 10px;">
 <img src="http://www.example.com/images/header.png" style="width: 600px; height: 274px; display: block;" alt="header logo">
</td>

Upvotes: 1

paulocholla
paulocholla

Reputation: 59

try these:

inside the tag: img{display: block;}

on the tag:

and a tip: if you have editable text, try using a line-height and put a number smaller than the font size. the line height may be messing with the tables and creating that white line as well.

Upvotes: 3

Archana Jossy
Archana Jossy

Reputation: 11

Try using display:block; as an inline style for all the images.

Upvotes: 1

superboringusername
superboringusername

Reputation: 68

Try removing all of the white space from around the tags so you get something like:

<tr>
    <td colspan="7"><a href="http://www.antequera-inland.com" title="Visit Antequera Inland website" target="_blank" onmouseover="window.status='Visit Antequera Inland website';  return true;" onmouseout="window.status='';  return true;"><img src="http://www.antequera-inland.com/email-template/images/www.antequera-inland.com.gif" alt="Visit Antequera Inland website" name="Visit-Antequera-Inland-website" width="233" height="23" border="0" /></a></td>
</tr>

Also add style="display: block" to each image.

Upvotes: 0

Related Questions