I am sure like me most of you are facing problem in viewing your promotional newsletters and emailers in Gmail for some time. Even in yahoo mail you may experience the same problem.
Due to addition of margin around the images, the html gets distorted. Incidentally the solution to fix this issue is very simple. Just add ‘display: block;‘ in image’s inline style.
Example:
<img src="image_name.jpg" border="0: style="display: block;" />
For the safer side you can add ‘margin: 0pt; padding: 0pt;‘ along with the display.
Example:
<img src="image_name.jpg" border="0" style="margin: 0pt; padding: 0pt; display: block;" />
I have done the cross browser testing and find working smoothly for me. Hope it will work for all.
Advertisement
June 3, 2010 at 3:36 pm
Ahhaa!! u made my job easy!!
August 5, 2010 at 6:21 am
Thanks for this – very helpful!!
August 23, 2010 at 1:30 pm
What about multiple layout images in a tableless structure? Can you suggest anything?
The code is as:
mysite.com
body
{
background : #000;
}
<code><a href="http://www.mysite .com" rel="nofollow"><b>mysite.com</b></a></code>
<a href="http://www.mysite .com/invite/invite.html" rel="nofollow">Can’t see the email properly? Click here.</a>
<a href="http://www.mysite.com" title="mysite.com" rel="nofollow"></a>
<a href="http://www.mysite.com" title="mysite.com" rel="nofollow"></a>
<a href="http://www.mysite.com" title="mysite.com" rel="nofollow"></a>
<a href="http://www.mysite.com" title="mysite.com" rel="nofollow"></a>
<a href="http://www.mysite.com" title="mysite.com" rel="nofollow"></a>
<a href="http://www.mysite.com" title="mysite.com" rel="nofollow"></a>
</code>
August 23, 2010 at 6:57 pm
@Ritwick – Your question is not very much clear and even code you have provided is not explaining the same.
The ‘Quick Fix’ method is to keep all the images together in a emailer in a email client such as Gmail. If you have to use the ‘style’ with every ‘img’ tag. It is for both table or table-less layout.
Let me know your issue in detail so that I can help with specific solution.
regards
-Vipul.
October 5, 2010 at 2:41 pm
Been looking everywhere, tried all fixes, display block, margin 0 ect….still not working for me…very frustrating..
please help with alterante to your exampl, not sure what is goin on
October 5, 2010 at 7:38 pm
@Richard – Can you please share your code so that I would be able to help with alternate method.
October 7, 2010 at 3:34 pm
Thanks. this worked like a charm.. Made by day
Thanks a TON !!!
October 8, 2010 at 2:36 pm
You Welcome!
February 14, 2011 at 7:55 pm
Also if you want to get rid of the Gmail image issue, you can add style=”font-size:0px” to the tag where image is inserted.
But this solution causes unreadable alt tag
February 14, 2011 at 10:10 pm
Hi Andrew,
It seems that you are not able to post example here.
Try to put your code inside ‘code’ tag.
Regards
Vipul