Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Hotmail on Firefox/Chrome link image

WesternMtnWeb

Newbie
Total Posts:  3
Posted: 15 April 2011 11:49 AM

Hello all,

Thanks for this forum, I found more useful info here than I have in many other places.  So onto my challenge:

When I create a rather elaborate email receipt for a company I work for, I can get the email nearly perfect in all browsers.  Here is my main problem:

In Hotmail, only when viewed in FF (version 3.5, 3.6, 4.0) and also in Chrome, only when a link is added to an image, it adds about 3-5 pixels below the image.  This can be solved by using the ‘align=“left”’ but that messes up the table layout in Outlook 2000, 2003, 2011 (mac), and yahoo mail.  I ran the email and found no discrepancies.

Here are things that I HAVE tried:
display:block
margin:0
all other alignment possibilities (right and left fix the gap, but break the tables)
display: inline (also tried inline-block)
border=“0”

Here is a snippet of the code:

<tr>
          <
td valign="top" colspan="3" width="343" height="31" style="line-height: 0;"><img border="0" src="http://www.westernmtnweb.com/email2/images/email_08.jpg" width="343" height="33" style="display: block;"></td>
        </
tr>
        <
tr>
          <
td valign="top" width="163" height="64" style="line-height: 0;"><img border="0"src="http://www.westernmtnweb.com/email2/images/email_09.jpg" width="163" height="66" style="display: block;" vspace="0" hspace="0"></td>
          <
td style="line-height: 0; font-size: 0;" width="158"><a href="#"><img border="0" src="http://www.westernmtnweb.com/email2/images/email_10.jpg" width="161" height="66" vspace="0" hspace="0" alt="alt text" align="left" style="display: block; margin:
           0;"
></a></td

Any ideas?


 

Michelle Klann

Avatar
Administrator
Total Posts:  204
Posted: 15 April 2011 12:36 PM
[ # 1 ]

Great question, this is actually caused by Hotmail’s doctype check out this blog post for optional fixes:

http://www.emailonacid.com/blog/details/C18/12_fixes_for_the_image_spacing_in_html_emails

Cheers and happy testing!


 

WesternMtnWeb

Newbie
Total Posts:  3
Posted: 15 April 2011 01:17 PM
[ # 2 ]

Thanks for the quick reply, but none of these are the issue.

The email display is correct when the image is in there:

<td style="line-height: 0; font-size: 0;" width="158"><img border="0" src="http://www.westernmtnweb.com/email2/images/email_10.jpg" width="161" height="66" vspace="0" hspace="0" alt="Get Your Instant Credit Score" style="display: block;"></td

The problem is making this little addition:

<td style="line-height: 0; font-size: 0;" width="158"><a href="http://www.westernmtnweb.com/"><img border="0" src="http://www.westernmtnweb.com/email2/images/email_10.jpg" width="161" height="66" vspace="0" hspace="0" alt="Get Your Instant Credit Score" style="display: block;"></a></td

Simply adding the <a> tag adds extra space under the image ONLY in firefox and chrome (probably safari, but I did not test that).  I have tried all of the suggestions (and even have many of them already implemented), but none work.

Using firebug, it appears that hotmail is adding this to the code:

<span style="font-size: 1pt; text-decoration: none;"

Before and after the image.

Again, adding align=“left” fixes this in firefox, but it breaks the table alignment in Outlook 2000, 2003, yahoo, and possibly 2011(mac).


 

Michelle Klann

Avatar
Administrator
Total Posts:  204
Posted: 15 April 2011 01:58 PM
[ # 3 ]

I just sent the following code to the actual Hotmail client as well as our Acid Test using Firefox:

<table bgcolor="#000000">
<
tr>
<
td style="line-height: 0; font-size: 0;" width="158">
<
a href="http://www.westernmtnweb.com/">
<
img border="0" src="http://www.westernmtnweb.com/email2/images/email_10.jpg" width="161" height="66" vspace="0" hspace="0" 
alt="Get Your Instant Credit Score" style="display: block;">
</
a>
</
td>
</
tr>
</
table>

<
br>
<
br>

<
table bgcolor="#000000">
<
tr>
<
td style="line-height: 0; font-size: 0;" width="158">
<
img border="0" src="http://www.westernmtnweb.com/email2/images/email_10.jpg" width="161" height="66" vspace="0" hspace="0" 
alt="Get Your Instant Credit Score" style="display: block;">
</
td>
</
tr>
</
table>

<
br>
<
br>

<
table bgcolor="#000000" cellpadding="0" cellspacing="0">
<
tr>
<
td style="line-height: 0; font-size: 0;" width="158">
<
img border="0" src="http://www.westernmtnweb.com/email2/images/email_10.jpg" width="161" height="66" vspace="0" hspace="0" 
alt="Get Your Instant Credit Score" style="display: block;">
</
td>
</
tr>
</
table

I don’t see the extra spacing you are referring to when you add the <a> tag.  Can you send me a link to your actual email so I can see this button in context?

Also when you say using firebug you notice a span above and below the image, did you see that in our Acid Test or on the actual client.  I don’t see the span that you are referring to in my test above in either.

Thanks,
Miki


 

WesternMtnWeb

Newbie
Total Posts:  3
Posted: 15 April 2011 02:02 PM
[ # 4 ]

I will get to that as quickly as I can, but I notice this about your code:

You have the end of the table and then two breaks.  Try to simulate it by having all of the images adjacent to one another and then add the link.


 

Michelle Klann

Avatar
Administrator
Total Posts:  204
Posted: 15 April 2011 02:32 PM
[ # 5 ]

I actually did test it that way first, I just added the BRs in there at the last minute so you didn’t get confused.  Maybe you just need to set the cellpadding and cellspacing to “0.”  I think this is an issue that is more browser specific vs. email client specific.


 

jmp909

Newbie
Total Posts:  1
Posted: 03 April 2012 08:45 AM
[ # 6 ]

it also appears hotmail in chrome now adds space above/below an image, if the image is by itself in a <td> but wrapped in a font tag.. in my case to style my alt tag

http://pastebin.com/Z4nGEtb9

the only solution was to remove the display:block from the image.


 

eric22

Newbie
Total Posts:  1
Posted: 06 December 2012 12:24 PM
[ # 7 ]

I was just having this issue, and I figured it out.

You need to add a line-height of 0 to the A tag that surrounds the img tag.

Ex:

<a href="http://www.abc.com" style="line-height:0;"><img src="http://www.abc.com/images/123.jpg"></a

That should do it.  I just tested this in Hotmail on both Firefox and Chrome, and it’s looking good, whereas before the line-height style was added, I was seeing that gap in the row under a linked image.