I have a horizontal space between 2 wrapper tables (only in certain clients such as outlook, 2003, 2007, gmail and a few others - works fine in most clients) - link to images:
http://jimharrison.co.uk/wp-content/uploads/2013/11/Untitled-1.jpg
I've tried:
border: collapse; -
display: block; (on images) -
valign="top" -
removing white space between tags -
resetting table margins, padding and borders (this left aligned my content so a big no no)
It's entirely possible the fix is really obvious... - check out the code and email here:
http://jimharrison.co.uk/wp-content/uploads/2013/11/index.html
Put your content into table rows, not stacked tables. You can nest within those table rows, just try to avoid multiple tables in the same parent element (sitting next to each other in the code).
Also, set the desired bgcolor on the table row's td's containing those (now nested) tables.
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#2f1d36">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
this is your purple table
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#d76118">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
this is your orange table
</td>
</tr>
</table>
</td>
</tr>
</table>
It is always good practice to have the parent element color set, as expanding like this is unavoidable when someone forwards an email from Outlook. Setting the color there will not prevent the gaps appearing, but will hide the white (or whatever color) stripes/gaps created.
Related
I have this table in my e.mail template and for some reason in outlook 2013 it apears double the height than it is actualy set:
[EDIT now codel looks like this]
<table align="center" border="0" cellpadding="0" cellspacing="0" height="6" width="100%" style="height: 6px; font-size: 6px; background-color:#d8ebf6; line-height= 6px;">
<tr class="preheader" width="100%" style="background-color:#d8ebf6;">
<td style="background-color:#d8ebf6;" align="left"></td><td height="6" width="600" align="center" style="background-color: #00568A;" valign="top"></td><td style="background-color:#d8ebf6;" align="right"></td>
</tr>
</table>
DEMO
Maybe some ideas why this happens or how to solve the issue?
Outlook will ignore height on empty table cells, it's minimum height is about 10px. You can add a non breaking space and this will look empty but satisfy outlooks desire to always be awkward.
So I wanted to share the solution I found which works fine both in outlook and common email inboxes:
Basically I needed to nest table in a table to get this dark blue part in the middle which on lower than 600 resolution takes up 100% width. And I needed to add font size and invisible char , because otherwise outlook was making two lines instead of intended one line.
Using previously posted code and adding invisible chars between <td></td> tags and adding font size helped as well, but on mobile(lower than 600 resolution) these invisible chars were leaving small whitespaces from left and right, so dark blue was not taking whole width as wanted.
Code:
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" class="res_width">
<tr class="preheader" style="background-color:#d8ebf6;">
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600" class="res_width">
<tr>
<td valign="middle" height="6" width="600" style="background-color: #00568A; font-size: 6px;">
</td>
</tr>
</table>
</td>
</tr>
</table>
DEMO
i just started learning in HTML.
I'm having a problem in cell padding and spacing...
the one that i created have a cell padding and spacing on all row... is it possible to have a cell spacing and padding in the 1st row but not in the 2nd row?
`
</td>
<tr>
<td width="250" height="500">
</td>
<td width="750">
</td>
</tr>
<tr>
<td colspan="2" height="75">
</td>
</tr>
`
You can simply add padding to each TD not TR
But spacing between cells only for the whole TABLE
The Attribute padding is the response about cell padding
<table border="1" style="border-spacing:2px;">
<tr>
<td width="250" height="500" style="padding:5px;">One</td>
<td width="750" style="padding:5px;">Two</td>
</tr>
<tr>
<td colspan="2" height="75">Three</td>
</tr>
</table>
I would suggest to wrap the content you want to edit in a and add css properties like for example:
Take a look at this div and style combination, it gets kinda useful sometimes. You can make the particular elements special even when they are in a table with constant style.
You can even add this style attribute to the / tags themselves. Maybe what you're looking for.
I'm designing a newsletter template and I'm having an issue with a table that contains graphics and text in the same row. For some reason, the graphic pushes the text all the way to the right. I'd like the text to be "connected"/left aligned with the icon as the template uses up to 3 icon sets (icon + text).
https://jsfiddle.net/o1dLoxa8/
The code doesn't look pretty right now as I've been trying everything just to make it work. Anyone able to help me out?
<table border="0" cellpadding="0" cellspacing="0" class="salesListText">
<tr>
<td align="left" valign="middle" class="saleslistIcon">
<img src="http://dyreparken-nyhetsbrev.s3.amazonaws.com/ikon/billetterL.png" alt="" height="28" width="28" />
</td>
<td align="left" valign="middle" class="saleslistIconText">
Billetter
</td>
</tr>
<tr>
<td valign="baseline" colspan="3">
<h2>Kaptein Sabeltann - Kun forestillingen</h2>
(Kan kombineres med parkbilletter og/eller overnatting)
</td>
</tr>
<tr>
<td valign="baseline">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="salesListSpec">
<tr>
<td valign="baseline" colspan="3">
<h4>Pakken inneholder:</h4>
- Billetter til forestillingen
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top" class="saleslistPrice" colspan="3">
<h2 style="color:#E3178A;"><span>Pris fra </span>240,-</h2>
</td>
</tr>
</table>
.saleslistIcon{padding-right:10px;}
.saleslistIconText{color:#B4B4B4; font-size:12px; padding-right:8px;}
.salesListText{width:100%;}
.salesListSpec{padding-top:10px; line-height:170%; display:block;}
h2 span{font-size:16px; font-weight:normal; color:#444444;}
You've got a table that has three columns; but you're jamming the image (small) and body text (large) in the same column (0). That will push columns 2, and 3 way to the right.
Try putting border="1" onto your table definition to see what I mean.
I'd suggest you use the outer table to create your rows and have only a single TD. Inside each TD then embed secondary tables for complicated layout. I'm assuming an email newsletter, so keep your CSS to a minimum or put it inline rather than a separate style section. A lot of email providers don't play nicely with CSS.
Hope that helps.
From the look of your fiddle, this is to be expected. You're using a table layout, meaning that all cells in the same column will have the same width and all cells in the same row will have the same height. My immediate recommendation is to ditch the table layout and use semantic elements.
If you're hellbent on using a table layout, you need to be aware of your colspan and rowspan attributes on your cells and how they affect your layout.
Put display:inline inside <tr> where you have the icon + text.
http://jsfiddle.net/zg0zrx3v/
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'm designing an HTML Newsletter and I've run into this problem:
As you can see, the cellspacing is completely out of whack: there shouldn't (and CAN'T) be a space between the rows on the left and right column. I don't really know what the culprit could be, any ideas would be appreciated!
Here's the relevant source code:
<table width="740" cellpadding="0" cellspacing="0" border="1">
<tr>
<td colspan="3">
<img src="top.jpg" width="740" height="53">
</td>
</tr>
<tr>
<td colspan="3" height="200" valign="top" id="headerCell">
<img src="header.jpg" width="740" height="200" alt="Headerbild">
</td>
</tr>
<tr>
<td>
L
</td>
<td valign="top" width="600" bgcolor="#ffffff">
CONTENT
</td>
<td>
R
</td>
</tr>
The HTML looks fine to me. Have you tried eliminating the unnecessary whitespace? That could be a possible cause (also, remember the great IE6, which had whitespace issues).
The HTML rendering engines in e-mail clients are just horrible. I've had to design some newsletters a while back and it sucked big time. Here's a nice collection of tips, maybe it'll be of some help.
I finally found out what was causing this spacing: a padding-top set on the center cell caused the left and right cells top edge to stay flush with the content-top of the center cell.