I haven't had to send any mailshots for a number of years and I remember the process to be very painful then.
I have cut up my design into three sections and placed them within a table the table has a height and width defined and so do all the individual elements, however when viewed in an email client such as Gmail there are spaces between the three table rows.
My html. I think you'll agree it couldn't be more simplified!
<table border="0" cellpadding="0" cellspacing="0" width="550" height="550">
<tr>
<td colspan="2" bgcolor="#ffffff" width="550" height="104">
<img src="images/OC_01.gif" alt="" width="550" height="104"></td>
</tr><tr>
<td bgcolor="#ffffff" width="246" height="341">
<img src="images/OC_02.gif" alt="" width="246" height="341"></td>
<td bgcolor="#ffffff" width="304" height="341">
<img src="images/OC_03.gif" alt="" width="304" height="341"></td>
</tr><tr>
<td colspan="2" bgcolor="#014280" width="550" height="105" valign="top">
<img src="images/OC_04.gif" alt="" width="550" height="105"></td>
</tr>
</table>
Is there anyone here today that has enough email html experience to point me in the right direction?
Edit to add: I have been dissecting some commercial emails that have been sent to me in the past and I have found that some of them also have this weird spacing issue in Gmail. I have also noticed that each has been designed in such a way as to accommodate any extra spacing between the rows so I'm going to assume that the answer to this question is to ensure that the design is produced in such a way that these gaps are not an issue.
You must include style="display:block" with all images to prevent the gap issue in various email clients.
Example:
<img src="http://www.website.com/images/kitty.jpg" alt="Picture of Kitty"
width="1000" height="1000"
style="border:none; margin:0px; padding:0px; **display:block;**"/>
Add following attribute to the IMG element:
style="display: block;"
I've added it for you http://jsfiddle.net/xE9Qr/
Default IMG display is inline-block which produces unwanted space after.
I've tested it using http://ctrlq.org/html-mail/ and the spaces between TR elements are gone now. Remeber to see the result you have to send HTML table layout email to your gMail account.
Adding align="top" to images seems to be a potential fix:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#ffffff">
<img src="images/OC_01.gif" alt="" width="550" height="104" align="top"/>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" width="246">
<img src="images/OC_02.gif" alt="" width="246" height="341" align="top" />
</td>
<td>
<img src="images/OC_03.gif" alt="" width="304" height="341" align="top" />
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#014280">
<img src="images/OC_04.gif" alt="" width="550" height="105" align="top" /></td>
</tr>
</table>
Related
I've tried several options to do this, but none have worked. Just trying to remove the padding around the images and tighten up the table. I'm thinking there must be some inline style I can use, but I'm too much of a novice to figure this out just yet. Any help would be greatly appreciated.
Here is the html generated from photoshop.
<table id="Table_01" class=" alignleft" style="height: 291px" border="0" width="570" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="2"> <img src="http://oceanleadership.org/wp-content/uploads/BOEM-Logo.jpg" alt="http://www.boem.gov/" width="297" height="115" border="0" /></td>
<td colspan="2"> <img src="http://oceanleadership.org/wp-content/uploads/JASCO-Logo.jpg" alt="http://www.jasco.com/" width="273" height="115" border="0" /></td>
</tr>
<tr>
<td> <img src="http://oceanleadership.org/wp-content/uploads/CSA-Ocean-Sciences-Inc.-Logo.jpg" alt="https://www.csaocean.com/" width="152" height="96" border="0" /></td>
<td> <img src="http://oceanleadership.org/wp-content/uploads/IFAW-Logo.jpg" alt="http://www.ifaw.org/united-states" width="145" height="96" border="0" /></td>
<td> <img src="http://oceanleadership.org/wp-content/uploads/MBARI-Logo.jpg" alt="http://www.mbari.org/" width="125" height="96" border="0" /></td>
<td> <img src="http://oceanleadership.org/wp-content/uploads/Schmidt-Ocean-Institute-Logo.jpg" alt="https://schmidtocean.org/" width="148" height="96" border="0" /></td>
</tr>
<tr>
<td> <img src="http://oceanleadership.org/wp-content/uploads/Teledyne-Marine-Logo.jpg" alt="http://www.teledynemarine.com/SitePages/HomePage.aspx" width="152" height="80" border="0" /></td>
<td> <img src="http://oceanleadership.org/wp-content/uploads/Ocean-Sonics-Logo.png" alt="http://oceansonics.com/" width="145" height="80" border="0" /></td>
<td> <img src="http://oceanleadership.org/wp-content/uploads/L3-Maripro-Logo.jpg" alt="http://www.l-3mps.com/maripro/" width="125" height="80" border="0" /></td>
<td> <img src="http://oceanleadership.org/wp-content/uploads/Sea-Bird-Scientific-Logo.png" alt="https://sea-birdscientific.com/" width="148" height="80" border="0" /></td>
</tr>
</tbody>
</table>
<br />
Using an inline style isn't a great idea, but including the attribute style='padding: 0px, margin: 0px' inline in your img tags would ensure the browser isn't rendering any extra space around the images themselves. A better option would be to include a .css file with the rule:
td img {
padding: 0px;
margin: 0px
}
That rule should automatically assign the styling to all img tags within your table.
Its Problem with Image I removed your style still its having white space its because of your images.
You can see below
your code
<table id="Table_01" class=" alignleft" style="height: 291px" border="0" width="570" cellspacing="0" cellpadding="0">
I removed this style and tried here
Demo
Requirement
I want to create an image with multiple hyperlinks on it and email it to someone.
What I did
I used Photoshop's slicing method and added URL to the slices. I saved the composition for web. For it to work on my recipient's end, I uploaded each slice to an online photo hosting website and edited the HTML tag img src="local photo location" to img src = "online photo location". But the problem is I get multiple white-spaces between each slice which distorts the overall image.
Code
<html>
<head>
<title>General Infosheet July 25</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (General Infosheet July 25.jpg) -->
<table id="Table_01" width="800" height="1034" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="http://facebook.com/">
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_01_zpsgxd25oae.jpg" width="539" height="158" border="0" alt=""></a></td>
<td rowspan="2">
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/StackOverflow-Version_02_zpsmqhre1ll.jpg" width="260" height="452" alt=""></td>
<td>
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="158" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/StackOverflow-Version_03_zpsnfkulzvt.jpg" width="539" height="876" alt=""></td>
<td>
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="294" alt=""></td>
</tr>
<tr>
<td>
<a href="http://twitter.com/">
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_04_zps239b1stn.jpg" width="260" height="144" border="0" alt=""></a></td>
<td>
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="144" alt=""></td>
</tr>
<tr>
<td>
<a href="http://instagram.com/">
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_05_zpsuwqhoawm.jpg" width="260" height="134" border="0" alt=""></a></td>
<td>
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="134" alt=""></td>
</tr>
<tr>
<td>
<a href="http://photobucket.com/">
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/WCG-General-Infosheet-July-25_06_zpsiwxkb9ty.jpg" width="260" height="304" border="0" alt=""></a></td>
<td>
<img src="http://i349.photobucket.com/albums/q381/shrijanaryal/StackOverflow/spacer_zpsfueep0xe.gif" width="1" height="304" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Question
I want to remove white-space between the images. Please provide code edits that will help to remove these white-space.
Make sure that the padding for each table cell is 0px, and then set the border-spacing property to 0, and the border-collapse property to collapse. Tables by default have spacing, resulting in whitespace.
Answer
I was able to solve this problem by inspecting the body section of the email in Hotmail, and then pasting entire HTML code in the inspector. That way, the code is not interpreted by Outlook, but rather by the web browser engine. So, this might be a resolute solution for anyone trying to email complex HTML code.
I made a newsletter, but whenever I (or the client) zoom in or out it messes up the proportions. I wasn't able to fix it, nor find (enough) helpful information on how to solve this.
Here's an example: http://fiddle.jshell.net/nmK6R/
Try to play with the zoom (Ctrl -) to see what's wrong. notice the top left section:
Notice that (at least in my PC) at 100% Zoom the proportions are great but either zoom in or out messes it up.
More than fixing the problem I would like to understand it better-
What is happening when I zoom in/out that makes the proportions change- why some elements change differently than others- I feel that if I truly understand how this works- more than fixing this mailer's problem i'll be able to this problem in further newsletters.
So Even if you won't solve this problem but explain me how zooming works- I might be able to solve it myself- it's just that I don't know what's happening so I don't know what's need to be fixed :p
I thank you for your help.
As requested, here's the (simplified ) code:
<table id="Table_01" width="872" height="500" border="0" cellpadding="0" cellspacing="0" dir="rtl" style="margin: auto;">
<tbody><tr>
<td>
<img style="border:0; display:block;" src="http://newsletter.pwizard.com/upload/account_86/template/images/newslettter-boz-new3_01.jpg" width="871" height="39" alt="">
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<td bgcolor="f8ebbe">
<img width="61" style="border:0; display:block;" src="http://newsletter.pwizard.com/upload/pix.gif">
</td>
<td bgcolor="9e7641">
<img width="25" style="border:0; display:block;" src="http://newsletter.pwizard.com/upload/pix.gif">
</td>
<td bgcolor="f5f2e3">
<img width="23" style="border:0; display:block;" src="http://newsletter.pwizard.com/upload/pix.gif">
<td bgcolor="red">
<img width="651" style="border:0; display:block;" src="http://newsletter.pwizard.com/upload/pix.gif">
<td bgcolor="f5f2e3">
<img width="26" style="border:0; display:block;" src="http://newsletter.pwizard.com/upload/pix.gif">
</td>
<td bgcolor="9e7641">
<img width="27" style="border:0; display:block;" src="http://newsletter.pwizard.com/upload/pix.gif">
</td>
<td bgcolor="f8ebbe">
<img width="58" style="border:0; display:block;" src="http://newsletter.pwizard.com/upload/pix.gif">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
I know this has been covered before but the solutions didn't help me - i'm not a programmer but i can handle basic HTML code. I am trying to send a HTML email out that has 11 images placed in a table to become one big image - however white lines appear between rows when i send it.
I have the table style set with border="0" cellpadding="0" cellspacing="0" but this doesn't help - can anyone please give me advice? Also as i am not a programmer I may not understand any complex answers!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled document</title>
</head>
<body>
<!-- Save for Web Slices (toast offer mailer 2.jpg) -->
<table style="height: 920px;" id="Table_01" width="650" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_01.jpg" width="236" height="201" border="0" style="border: 0;"></td>
<td colspan="3"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_02.jpg" width="177" height="201" border="0" style="border: 0;"></td>
<td colspan="2"><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_03.jpg" width="237" height="201" border="0" style="border: 0;"></td>
</tr>
<tr>
<td><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_04.jpg" width="152" height="155"></td>
<td colspan="3"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_05.jpg" width="173" height="155" border="0" style="border: 0;"></td>
<td colspan="2"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_06.jpg" width="180" height="155" border="0" style="border: 0;"></td>
<td><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_07.jpg" width="145" height="155"></td>
</tr>
<tr>
<td colspan="7"><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_08.jpg" width="650" height="237"></td>
</tr>
<tr>
<td colspan="7"><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_09.jpg" width="650" height="231"></td>
</tr>
<tr>
<td colspan="3"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_10.jpg" width="314" height="95" border="0" style="border: 0;"></td>
<td colspan="4"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_11.jpg" width="336" height="95" border="0" style="border: 0;"></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="152" height="1"></td>
<td><img src="images/spacer.gif" width="84" height="1"></td>
<td><img src="images/spacer.gif" width="78" height="1"></td>
<td><img src="images/spacer.gif" width="11" height="1"></td>
<td><img src="images/spacer.gif" width="88" height="1"></td>
<td><img src="images/spacer.gif" width="92" height="1"></td>
<td><img src="images/spacer.gif" width="145" height="1"></td>
</tr>
</tbody>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
On images, try using
style="display:block"
It should work.
From quick check I just did, looks like the problem is due to blank space inside the cells markup taking up some place and making the cells bigger.
One way around this is setting the font size of the cells to 0 thus eliminating that extra space.
Live test case with the fix applied.
In your case, try adding this to the HTML you send:
<style type="text/css">
table td { font-size: 0px; }
</style>
This is assuming you have only one table and all cells have only images, if you have more tables then give that specific table id e.g. <table id="MyImagesTable"> then change to:
#MyImagesTable td { font-size: 0px; }
If the email client of those getting the email does not support style sheets you will have to manually set it for each cell:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 0px;">...</td>
<td style="font-size: 0px;">...</td>
<td style="font-size: 0px;">...</td>
</tr>
<!-- ...more rows... -->
</table>
I also face same problem.
But i tried
<img src ="images/xyz.jpg" style="display:block">
and solved
This problem is common on many mail clients, just use:
<img style="display:block" />
on every image in your HTML.
Without actually having seen your code, I would guess that you're seeing spaces between your images because you have actual space between your images.
If you have something like this...
<img src="image1.jpg">
<img src="image2.jpg">
Change it to... (note there is no space between the two image tags)
<img src="image1.jpg"><img src="image2.jpg">
If you are placing the images within individual cells (i.e. one image per cell) then try putting the CSS of border-collapse:collapse...
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
UPDATE
As #Shadow has pointed out, neither parts of the above will make any difference.
It appears that FireFox and Chrome deal with the image as it would text (for some reason), therefore his suggestion of table td { font-size:0px; } is IMHO the correct answer. (IE doesn't seem to be effected by the issue.)
A lot of this is flat out ignored by certain mail clients. This is always the risk you take in heavy graphic html emails. You are almost guaranteed to have recipients that see it incorrectly. I always encourage my clients to not ask for these kind of email designs that are 6-12 images grouped up in a table. However, there will always be the ones that insist it be done and even after I show them the results in multiple mail clients they still request it be done.
Avoid it if you can. Unfortunately, there is really no guaranteed fix.
If you are sending the email to a group of recipients that are all in the same mail client you can probably solve it with one of the codes above to find the one your mail client responds to best.
a lot of times it could be user error. when you slice in photoshop, make sure ALL SLICES ARE TOUCHING. if there is a 1px gap, then that will screw everything up!!!
also, here's a trick i learned....
Set all images to have a border="0" tag after the alt=""...
if there are any
** ** tags, and i mean only
, not
so for example....
try that, and make sure all images have border="0" and all tags have a set width, all slices are touching, and you should have 0 gaps.
I've been trying to figure this out for a day and none of the tutorials seem to have the fix. Does anyone know why Gmail Adds a margin? It seems to append a span with two underline tags within a span which causes a 3 pixel margin underneath.
<table>
<tr><td colspan="2" width="700" height="632" valign="top"><a href="" border="0" ><img src="test image here" width="700" height="632" border="0" alt="test" style="display: block;" /></a></td>
</tr>
<tr><td colspan="2" width="700" height="28" valign="top"><img src="test image" width="700" height="28" border="0" alt="Email" style="display: block;" /></td>
</tr>
</table>
Figured it out... Outlook is appending a CSS class
http://www.google.com/support/forum/p/gmail/thread?tid=0076054aff3bc664&hl=en
Figured it out... Outlook is appending a CSS class
http://www.google.com/support/forum/p/gmail/thread?tid=0076054aff3bc664&hl=en