When coding a HTML email newsletter Outlook 2010 is acting up. (surprise surprise)
The following screenshot is the result: http://screencast.com/t/PSZqP7wg
This screenshot shows what's happening (same, but images turned off): http://screencast.com/t/DrbexyHnytJ
Obviously, the middle white column is to narrow. Should be 604px wide, but is a lot less. It seems Outlook is placing extra padding next to the spacer images.
Anyone has an idea why this is happening?
This is the source in the body tag:
<table width="761" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3" height="151" style="height: 151px;" style="padding: 0px;"><img width="761" height="151" src="http://www.bothino.be/newsletter/top.jpg" alt="" /></td>
</tr>
<tr>
<td width="77" style="width: 77px;">
<img src="http://www.bothino.be/newsletter/spacer.jpg" width="77" alt="" />
</td>
<td width="604" bgcolor="ffffff">
test sdlkfjhklsdjfhqsdklfh qklsdfh klqsjf lqksjdf lkqsjdhf lkdflkqshdfkl jqhsdlkfj
hqslkdfh qlksjdfh lqskjdhf lkqjshdlfk jqhsldkfh qlsdjfh lqksjdflk qsdflkqshdklfh
klqshdf kqshdklf hqskldfqklsd
</td>
<td width="76" style="width: 76px;"><img src="http://www.bothino.be/newsletter/spacer.jpg" width="76" alt="" /></td>
</tr>
<tr>
<td height="151" colspan="3">
<img width="761" height="151" src="http://www.bothino.be/newsletter/bottom.jpg" alt="" />
</td>
</tr>
</table>
You just need to add a background color to both tags. the widths are displaying correctly.
I'm used to issues with "undefined" blank spaces and line breaks in IE and Outlook. They are usually interpreted as a real, wanted space, formatted by style of the nearest parent (if any).
That's why i prefer writing htm like this:
<tr>
<td height="151" colspan="3"><img
src="http://www.bothino.be/newsletter/bottom.jpg"
width="761" height="151" alt="" /></td>
</tr>
Line breaks inside a tag will make no difference at display time ... but apply a similar structure to the code.
The important part is no blank between TD and IMAGE tag.
Maybe, this doesn't explain and solve that huge indentions in your screenshot.
my experience with Outlook is to never ever never ever use the rowspan and colspan attributes. This is guaranteed to cause trouble. Should a table cell require a different layout/width than the one above/below it, nest another right into it with the correct layout. this way the overall basic grid stays intact. Not nice, but then again: outlook plays dirty and so will you (have to). All tables need to have cellpaddign=0 and cellspacing=0. This helps me to get over similar issues.
sometimes it's better to leave out width for td's eg leave out width=77 and rest of width for all td's. that way it can expand automatically to fill the entire row. or you can also include a table withing that tr.
Related
I am making a simple newsletter layout that can only contain basic HTML but am getting caught up on formatting it properly. I have very little html experience, if I could use css I could lay this out but this is meant to be low level html that most e-mail clients can display properly.
This is a bit of code that I've done to get the image and a button (in the position of button 2) looking correct but it's getting the top and bottom buttons sitting there correctly that's the issue.
<table width="100%" style="text-align:center;">
<td>
<img src="http://localhost/temp/leftpic.png"></td>
<td>
<img src="http://localhost/temp/button.png"></td>
</table>
This is my design outcome. With the outter border being a table border centered in the middle of the page.
Is it possible to format something relatively close to this without using css?
I appreciate any help, cheers.
You CAN use css, you just have to avoid third-party files. You need to define the CSS rules inline, that is, in the style attribute, as you are already doing it for table. However, your HTML is invalid. You need to have tr elements outside your td elements and it is healthy to actively wrap your tr elements inside a tbody, which should be the child of your table.
By the way: the reason one should avoid third-party css in this case is that it might mess the design of the page of gmail/yahoo.
Something like this will start you off... This is with no CSS and no styling (other than what you have originally).
Although you state no CSS yet your first line is styling (albeit inline). Did you just mean no external file?
This is how we used to do layout before CSS, so this is using HTML tables:
<table width="100%" style="text-align:center;" border="1">
<tr>
<td width="50%">
<img src="http://localhost/temp/leftpic.png" width="390" height="480" />
</td>
<td>
<table>
<tr>
<td><input type="button" value="bn1" /></td>
</tr>
<tr>
<td><input type="button" value="bn2" /></td>
</tr>
<tr>
<td><input type="button" value="bn3" /></td>
</tr>
</table>
</td>
</tr>
</table>
Since you have a fixed height of your image on left, you can also use
<tr height="160">
Since 160 * 3 = 480 (the height of your image)
See an example here https://jsfiddle.net/on6ytfyn/
You probably want to remove the border in the first line of code too.
I'm experiencing a bit of a frustrating problem with no real means to find solution...
I'm coding an HTML email and I have a particular table that is expanding all the way to the end of the browser. Everything I've tested this in (All browsers, Yahoo, Gmail, Outlook Mac 2011) did nothing of the sort. I received a screenshot from a recipient though that is very out of whack. I'm not sure how I can go about fixing this when everything I try it in looks fine...
Incorrect:
Correct:
As you can see in the screenshot, the center column is expanding as far as it can between the two columns beside it. In the correct screenshot you will see how it should actually appear.
If anyone can give me some kind of direction it would be greatly appreciated.
<!--Container-->
<table cellpadding="0px" cellspacing="0px" width="600px" style="margin:0px auto;border:0px;border-spacing:0px;border-collapse:collapse;display:block;background-color:#1a223e;">
<tr>
<td style="vertical-align:top;">
<!--Left Column-->
<table width="227px" cellpadding="0px" cellspacing="0px" style="border:0px;border-spacing:0px;border-collapse:collapse;margin:0px auto;display:block;padding:0px;">
<tr>
<td><img src="left_image.jpg" width="227" height="932" style="display:block;border:0px;border-spacing:0px;border-collapse:collapse;vertical-align:top;background-color:#1a223e;" /></td>
</tr>
</table>
</td>
<td style="vertical-align:top;">
<!--Content-->
<table width="340px" cellpadding="0px" cellspacing="0px" style="border:0px;border-spacing:0px;border-collapse:collapse;margin:0px auto;display:block;vertical-align:top;font-family:Arial, Helvetica, sans-serif;font-size:14px;line-height:16px;font-weight:normal;color:#1a1a1a;background-color:#ffffff;">
<tr>
<td style="vertical-align:top;display:block;">
<img src="headline.jpg" width="271" height="85" style="display:block;margin:0px auto;border:0px;border-spacing:0px;border-collapse:collapse;background-color:#ffffff;margin-bottom:20px;padding-top:25px;" />
When using the deprecated width and height attributes rather than CSS, you need to adhere to their semantics. The attributes take either a number value, implying pixels, or a percentage followed by a % as a value. So:
<table width="600"> <!-- correct -->
<table width="60%"> <!-- correct -->
<table width="600px"> <!-- invalid attribute value! -->
Most HTML renderers aren't really pedantic about this, but it would appear your client found one that is. I'm pretty sure changing it to width="600" will fix your problem.
You can actually see on the Incorrect screenshot that this is the solution since it also ignores your cellspacing declarations, defaulting them back to the normal value of 1 because they have the px included. Note that even in CSS this is considered bad form - 0 has no dimension at all, and as such no unit to measure it in, so in CSS you should also always write 0 rather than 0px, 0em or 0%.
when you are coding email templates always prefer to set <td width="600"> instead of <table width="600"> , set width for each <td> and it will be ok , let me know if it does not work
I've just started using a new HTML email software (was using Campaign Monitor but now having to use a plugin within our CMS).
Our template uses some empty cells at the top with different background colors for aesthetic purposes.
When using Campaign Monitor these showed fine in Gmail but in the new software (eCampaign) Gmail is totally ignoring the height of the cells, making them all 1 pixel high.
I tried adding height="x" and style="height: x;" but neither seem to work.
I want to avoid using spacer gifs if I can.
Further down the email I've put in a tag but this makes the height too large then.
I've seen some suggestions of wrapping the in a tag but not sure if that will work.
Any suggestions?? Need an answer asap!
My code is as follows:
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td valign="top" height="6" colspan="2" bgcolor="#edede9" style="font-size:1px; line-height:6; height:6;"></td>
</tr>
<tr>
<td valign="top" height="6" colspan="2" bgcolor="#c4c3b6"><!-- --></td>
</tr>
<tr>
<td valign="top" height="1" colspan="2" bgcolor="#ffffff"><!-- --></td>
</tr>
</table>
The only way is to use a trans_dot.gif or other spacer image within the empty cells. It cant be done in any otherway.
So find or make a 1px * 1px transparent image and insert.
If a cell is without text or images it will collapse in 9 out of 10 email clients
I was wondering if I use colspan attribute in a HTML table that I intend to have as an email, will email clients (Outlook etc...) understand what colspan does, as I have read that this might cause an issue with the layout?
Colspan and rowspan are both fully supported in all major email clients. They are more difficult, but if you get it right they are a great option in combination with nested tables.
The reason they have a bad reputation, besides the difficulty is because there is a particular quirk in Outlook you need to take into consideration, otherwise your layout can break.
Colspan:
Outlook has an issue where if you put a colspan in the first row of a table, it will mess up the widths of the subsequent rows. The work around for this is that you need to specify your cell widths in the top row, even if it is an empty row.
Here is an example:
<!-- the second row in this example will not respect the specified widths in Outlook -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="600" colspan="3" bgcolor="#757575">
</td>
</tr>
<tr>
<td width="200" bgcolor="#353535">
</td>
<td width="400" bgcolor="#454545">
</td>
<td width="200" bgcolor="#555555">
</td>
</tr>
</table>
<!-- here is the fix - note the empty row at the top enforces the specified width in Outlook -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200">
</td>
<td width="400">
</td>
<td width="200">
</td>
</tr>
<tr>
<td width="600" colspan="3" bgcolor="#757575">
</td>
</tr>
<tr>
<td width="200" bgcolor="#353535">
</td>
<td width="400" bgcolor="#454545">
</td>
<td width="200" bgcolor="#555555">
</td>
</tr>
</table>
Rowspan:
Even more avoided than colspan is rowspan. I've found it can actually display more consistently than nesting tables depending on your target audience. This is because rows (particularly a spanned one) do not separate as much as tables when forwarding the email from Outlook due to the <p class="msoNormal"> tags Outlook wraps around them. These gaps are particularly unavoidable if someone forwards your email to Gmail.
One thing to note is that rowspan doesn't seem to work with Blackberry (which I wouldn't consider a major client). So like with anything in html email, you need to play the percentages game and decide where you least want it to break.
A basic example of colspan and rowspan working together:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr><!-- hidden row to establish widths in Outlook -->
<td width="200">
</td>
<td width="200">
</td>
<td width="200">
</td>
</tr>
<tr>
<td width="400" height="200" colspan="2" bgcolor="#333333">...
</td>
<td width="200" height="400" rowspan="2" bgcolor="#444444">...
</td>
</tr>
<tr>
<td width="200" height="400" rowspan="2" bgcolor="#555555">...
</td>
<td width="200" height="200" bgcolor="#666666">...
</td>
</tr>
<tr>
<td width="400" height="200" colspan="2" bgcolor="#777777">...
</td>
</tr>
</table>
To accomplish something similar to this without rowspan/colspan, you would have to split the rectangular table cells into small squares. Imagine if the top right cell was an image overlapping the header see this question for a real world example. If you were to avoid rowspans and split the logo image horizontally within two stacked cells, this would become problematic when Outlook does it's msoNormal thing. Nobody likes a seam in their image.
In html email, you can always split images vertically without any risk of seams/gaps, but as a rule, you should always avoid splitting an image horizontally. Rowspan helps to avoid this in scenarios when you want overlapping images.
One last note - Outlook also has the same spanning issue with rowspan as it does with colspan. You need to establish your row heights in the first column for it to respect the heights of the subsequent spanned rows. Here is an example of that. Note the first cell in each row is empty.
Just thought id add a bit of input to your question
Colspan can be used but i would suggest against it. Whenever i create emails (6 months experience) i have always used nested tables. Also you can only use inline css in emails so i would be very careful using even margin and padding.
Couple of things i do on every email.
Always use this code in every image on your page. It will correct a gmail space below the image bug.
style="display:block"
Also use border="0" on any image links to stop a blue border appearing.
I hope this helps!
Another tip in addition to the style="display:block' is to add line-height:0 on the with an image in - this sorts out the odd whitespace bug in Outlook 2007.
I use colspans all the time but also nest tables where possible - avoid rowspans - they are are nightmare, and when you do nest tables don't go too mad and nest 4 / 5 or 6, I find that starts to muck things up.
Yep. All HTML markup is allowed in most if not all email clients. When it comes to scripting, then you've got an issue to contend with, for scripting is simply not allowed by most if not all email clients.
Rowspans and Colspans are okay but I would strongly suggest you use nested tables. You will have extra lines of code, however, this will save you from any breaks on other email clients.
I've researched this problem, finding many suggested fixes on the web, but nothing is working.
The problem is the gap between a specific TD element in a table in an HTML email I'm designing. It's displaying this way only in Outlook 2007 and 2010.
Here is a link to a screen grab of the problem
In the sidebar on the right, there should be no gap between "Level 2" and the thin rounded corner box above it.
Here is the code for the nested table that creates the blue box:
<table class="box" width="200" border="0" cellspacing="0" cellpadding="0"><tr><td style='line-height:0;font-size:0'><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_top.gif" style="display:block" width="200" height="10" /></td></tr><tr><td class="box_dark"><h2>Level 2<br /><span class="white">Care Assistants</span></h2><h2>Level 3<br /><span class="white">Senior Carers</span></h2><h2 class="norule">Level 5<br /><span class="white">Managers and Deputy Managers</span></h2></td></tr><tr><td style='line-height:0'><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_bottom.gif" style="display:block" width="200" height="10" /></td></tr></table>
As you can see, I've removed all white space as this was suggested in one of the work-arounds I found. I've also inserted the 'line-height:0;font-size:0' style in the TD element and the 'display:block' style in the image itself, again all suggested work-arounds. None of these has made the slightest difference.
This problem does not appear in any other email client or browser.
Please help!
Using tables is standard practice in html email builds because css support is poor in email clients, particularly Outlook.
Keep your table structure but try these additions:
Add valign="bottom" to the td cell containing box_dark_top.gif and valign="top" to the next two cells
For each image, set the css as style="display:block;margin:0;padding:0"
Use inline css rather than internal
<table class="box" width="200" border="0" cellspacing="0" cellpadding="0">
<tr><td valign="bottom"><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_top.gif" style="display:block;margin:0;padding:0" width="200" height="10" alt="" /></td></tr>
<tr>
<td valign="top" class="box_dark">
<h2>Level 2<br /><span class="white">Care Assistants</span></h2>
<h2>Level 3<br /><span class="white">Senior Carers</span></h2>
<h2 class="norule">Level 5<br /><span class="white">Managers and Deputy Managers</span></h2>
</td>
</tr>
<tr><td valign="top"><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_bottom.gif" style="display:block;margin:0;padding:0" width="200" height="10" alt="" /></td></tr></table>
Outlook 2007 onward uses Word to render HTML. Here's an article about this, with links to more strongly-opinionated articles and websites.
Maybe you could try designing your message in Word (or Outlook itself)? Of course then it may not render properly in a sane email client.
Set the height of the TD as well as any other TD that should have a fixed height:
<td valign="bottom" height="10" width="200">
*You should also be using width on ALL TD's in email.
I've found out that Outlook is wrapping img tags with and styling a margin-top whenever they "feel" like it. You can check the html generated by saving the email as html.