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.
Related
So I am building the final page of an online exhibit I am working on. The final page uses the exact same format as an earlier page in the exhibit (with an image to the left and a paragraph to the right of the image) so I just copy/pasted all the code and changed URLs, text, and dimensions of images and td elements as I needed to. I have changed nothing to do with the alignment of the various elements on the page, but now I have an element that is basically ignoring td valign="top" and appears to be aligned to center instead. I've done a line by line comparison of the html of the new page with the original but I can't find anything that should have changed it. Basically the text part of the page (title of page and body of page) should start on the same line as the top of the image, but instead it's starting in the center after a huge amount of white space.
Here's the particular table in question with the text and full URLs removed to make it a bit shorter:
<table width="917" border="0"></br>
<tr>
<td width="400" valign="top">
<table width="10" border="1" align="center" bordercolor="#8AC3C9">
<tr>
<td width="184" bordercolor="#8AC3C9"><div align="center"><img src="*image*" alt="image" width="400" height="267" hspace="1" vspace="1" border="0" align="middle"></div></td>
</tr>
<tr>
<td bordercolor="#8AC3C9" bgcolor="#8AC3C9"><div align="center" class="style2">*Image*</td>
</tr>
</table>
</div>
</td>
<td width="500" "valign="top"><div align="center"><font size="+2" face="Georgia"><b>*Title of page*</b></font></div></br>
<div align="justify"><font face="Georgia">*Body of page*
</div></td>
</tr>
There is a " in front of valign, so it's not reading the attribute.
<td width="500" "valign="top"><div align="center">
The full code should be:
<table width="917" border="0"></br>
<tr>
<td width="400" valign="top">
<table width="10" border="1" align="center" bordercolor="#8AC3C9">
<tr>
<td width="184" bordercolor="#8AC3C9"><div align="center"><img src="http://placehold.it/400x267" alt="image" width="400" height="267" hspace="1" vspace="1" border="0" align="middle"></div></td>
</tr>
<tr>
<td bordercolor="#8AC3C9" bgcolor="#8AC3C9"><div align="center" class="style2">*Image*</td>
</tr>
</table>
</div>
</td>
<td width="500" "valign="top"><div align="center"><font size="+2" face="Georgia"><b>*Title of page*</b></font></div></br>
<div align="justify"><font face="Georgia">*Body of page*
</div></td>
</tr>
Here's a working codepen: http://codepen.io/vic3685/full/vyKmwg/
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.
So, typical question. I have searched a boatload here. Tried everything suggested. Nutin'
So Maybe to ask the question fresh.
I am having some verical gaps in Outlook 2013 (and 2007 too i think) between my image slices. (Also my text is extending further than it is set as)
Knowing that display:block doesn't really work for Outlook. I've tried wrapping in spans and giving the span a display:block
I'm at a loss. I'm hoping someone can answer this one easily. Grrrrr!!!! Outlook! Why must you be so popular?
http://pastebin.com/ESfEmWer
http://tinypic.com/r/2gtdhu1/6
Don't go for
display: [anything]
if you wish to include Outlook 2007. See http://www.xequte.com/support/maillistking/css_in_emails.html for reference of which CSS styles you can use and which you better don't.
Don't use any whitespaces trailing
<td>
and don't use any whitespaces preceding
</td>
And you should also avoid
<style>...</style>
as this will most likely will be striped away completely. Always go for inline-styles. And I know that this is not part of a real answer, but just as a hint: If you are doing HTML newsletters make them as if you were doing them for Internet Explorer 4. E-Mail clients like Outlook use the most ridiculous CSS-renderer you can imagine. Even Internet Explorer 5 is more sophisticated in rendering CSS then modern Outlooks.
Oh, and by the way: If there is a chance that the recipients of your newsletter might read them online in hotmail, gmx or gmail then you should check them, too. You will stand in awe and wonder how those online clients handle your code and what they inject.
You have a ton of whitespace causing the gap:
<a href="mms://a1783.v167326.c16732.g.vm.akamaistream.net/7/1783/16732/0/QPS.Onstreammedia.com/origin/jjready2/%5bInbox%5d/Talent%20Management/CDF%201-18_WMV.wmv">
<img style="display:block" src="http://emaniocreative.com/eblasts/3_26_2013/Message-from-Dominic-&-Louise.jpg" width="360" height="257" border="0" alt="Message from Dominic & Louise - Video"></a>
Try taking the whitespace out.. also display:block doesn't work like display:inline-block (the later you probably want instead) You cannot add formatting such as margin or padding to SPAN. I would keep what you have as IMG and DIV elements, however if you are using a TABLE you may want the border-collapse:collapse; property set.
Also to note, if you are using display:inline-block you will want to take out ALL whitespace between your elements:
<tr>...</tr><tr>...</tr>
Instead of what you have currently:
<tr>
...
</tr>
<tr>
...
</tr>
You have way too many colspans, which could cause problems. You should be nesting your tables instead.
I've created hundreds of emails and never had any issues with whitespace caused by line-returns in email code. (Outlook 2007 is the first thing I check my emails in)
It is always good practice to use display:block; and also keep images in their own <td> by themselves.
Try something like this instead:
<html>
<head>
<title>Ambassador Newsletter</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>img {display:block}</style>
</head>
<!--REPLACE the following text with the path to the images on your server http://emaniocreative.com/eblasts/3_26_2013/ -->
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#ebebeb" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">
<table id="Table_01" width="650" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="border-collapse: collapse;">
<tr>
<td>
<!-- NEST A TABLE INSTEAD-->
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#770000">
<tr>
<td style="padding:20px;">
header
</td>
</tr>
</table>
<!-- /NEST-->
</td>
</tr>
<tr>
<td>
<!-- NEST A TABLE INSTEAD-->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="padding:20px;">
Body section 1
</td>
</tr>
<tr>
<td style="padding:20px;">
Body section 2
</td>
</tr>
</table>
<!-- /NEST-->
</td>
</tr>
</table>
</td></tr></table></td></tr></table></body></html>
In my example I used padding instead of cells for spacing.
You never need a blank spacer image. Use a in an empty cell instead if you prefer not to use padding:
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#770000">
<tr>
<td height="20" colspan="3">
</td>
</tr>
<tr>
<td width="20">
</td>
<td width="610">
header
</td>
<td width="20">
</td>
</tr>
<tr>
<td height="20" colspan="3">
</td>
</tr>
</table>
On a side note, there is an unavoidable issue with vertical separation when forwarding from Outlook to Gmail for example, (courtesy of mso.normal p tags added) but for the initial recipient there are no problems.
I have a website, http://pigymunk.co.uk, and as you can see, the table has some fault where there's a a large gap between 2 cells. Can anyone help find that fault?
<table border="0" align="center" width="300" style="float:center" cellspacing="0">
<tr>
<td><img src="http://www.pigymunk.co.uk/jackw.png" alt="JackW" style="align:"middle"/></td>
</tr>
<tr>
<td><img src="http://www.pigymunk.co.uk/About%20icon.png" alt="About" style=" align:"middle"/> </td>
<td><img src="http://www.pigymunk.co.uk/Blog%20icon.png" alt="Blog" style=" align:"middle"/></td>
You can change the colspan attribute of your first cell to span the other columns. Note the cell that has <td colspan="4">. Try this:
<table border="0" align="center" width="300" style="float:center" cellspacing="0">
<tr>
<td colspan="4"><img src="http://www.pigymunk.co.uk/jackw.png" alt="JackW" style=" align:"middle"/></td>
</tr>
<tr>
<td><img src="http://www.pigymunk.co.uk/About%20icon.png" alt="About" style=" align:"middle"/></td>
<td><img src="http://www.pigymunk.co.uk/Blog%20icon.png" alt="Blog" style=" align:"middle"/></td>
<td><img src="http://www.pigymunk.co.uk/Faceb%20icon.png" alt="Facebook" align:"middle"/></td>
<td><img src="http://www.pigymunk.co.uk/distractions.png" alt="Demos" align:"middle"/></td>
</tr>
</table>
jsFiddle example.
And just as a side note, you may want to look into updating your code and getting rid of deprecated attributes like align="center" and inline CSS among other things.
Quick fix: change the first <td> to <td colspan="4">.
Your table has one cell in the first row, four cells in the second row. This violates the HTML table model principles, so all bets are off. What happens in practice is what you see here: the first cell (the large image) is treated as belonging to the first column only.
This can be seen e.g. in Firefox Web Developer Extension, which has a function for drawing borders around all cells.
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>