Office rendering of HTML is a known headache an I have a problem with Outlook 2016. A small, 1px horizontal line is rendered below my table. Tables are a common practice for formatting due to many Outlook/Office/Word HTML/Richtext/Mixup flaws.
The 1px line is really a small gap or hole in the white background color of the table, showing the background color of the body. I managed to figure this out by changing background color to red instead of grey.
The code can be tested in Notepad++ by selecting Run>Send via Outlook on a computer with Windows and Outlook Client installed...
<!DOCTYPE html>
<html>
<head>
<style>
html,
body
{
font-family: 'sans-serif';
}
</style>
</head>
<body style="background-color: red">
<table style="background-color: white;" >
<tr>
<td>
<table>
<tr>
<td>
Test before
</td>
</tr>
</table>
<table>
<tr>
<td>
<p>
Test 1<br>
Test 2<br>
Test 3
</p>
</td>
</tr>
</table>
<br/><br/>
Test after
</td>
</tr>
</table>
</body>
</html>
The structure is a scaled down version of an email where the elements are used to present information.
(Note! TL;DR; - Best solution in the bottom)
There are couple of different ways of changing the structure to make the gap go away. However this is not an option in my case. The solution that fixed it for me, was to scale down everything to a minimal, step by step according to the above, and finally try to change all values.
The final solution in my case, was to change font size in the table before, to NOT 30px.
Test before
In my specific encounter with the randomizer-magic of Ms Outlook rendering, this was the key. I am sure the solution may vary for others, but changing a few font-sizes around might be worth a shot.
Since this took me long enough I thought I better post the solution, maybe it can help someone as frustrated as me!
[Edit] Here is another example of this issue - Messing with line-height
<!DOCTYPE html>
<html>
<head>
<title>Yea</title>
</head>
<body style="width: 100%; background-color: white;">
<br/><br/>
<table cellspacing="0" cellpadding="0" style="background-color: white;width: 100%; line-height: 0;" border="0" border-size="0">
<tr>
<td style="height: 114px; font-size: 100px; background-color: #999999"><span> My name is Jasper</span></td>
</tr>
</table>
<br/><br/>
</body>
</html>
Well, the issue in this case when investigating the code, was the line-height: 0; of the table element. Remove it or set it to 1px to get rid of the element that looks like a white thick line but is actually a glimpse of the background. This is definitely a rendering bug and it at least shows in Outlook 2019 / 2016 (win 10). Reproduceable with Litmus.
[Edit #2 - Add an invisible tag]
By adding the patent pending gap-line eliminator directly before the problem-table-tag I managed to get rid of some lines.
<table class="unwanted-line-eliminator" cellpadding="0" cellspacing="0" style="height:0">
<tr>
<td style="font-size: 0px;line-height: 0px;"> </td>
</tr>
</table>
[Edit #3 - Finally - Best solution!]
Since the gaps are a bit random between Outlook versions, appears both horizontally and vertically (according to my last few hours of troubleshooting) and depends on DPI settings amongst other things the absolute best solution seems to be the following...
Add a content encapsulating <table style="background-color: lime"><tr><td>CONTENT</td></tr></table> with the top/front background-color. This will for some reason cover all gaps! Best of luck!
Another possible solution which helped in my case was to avoid using paragraphs <p> - I've just replaced them with line breaks <br/><br/>.
Related
I’m going through the horror of trying to make HTML e-mail templates that look acceptable in Outlook, and quickly nearing the point of hara-kiri.
I have a basic table setup: three columns, with all content in the middle one. The columns on the side are just there to give spacing. The table has a width of 100% so it takes up the entire width of the reading window. So essentially this (with all the Outlook-specific crud left out):
<table>
<tbody>
<tr>
<td class="leftsidespacer"></td>
<td class="maincontent">
<p>All the content here</p>
<div class="thisisabox">
<p>Something here too</p>
</div>
</td>
<td class="rightsidespacer"></td>
</tr>
</tbody>
</table>
In any normal e-mail client, this is a piece of cake. You set a width on the middle column and that’s pretty much it. Outlook 2007 (and probably other versions) instead collapses all three columns so the middle column takes up 100% of the body width. Basically, setting a width on a table cell has no effect.
All right, so I fall back on really old-time ways of adding an image in the empty cells to force them to have some width. Ugly and stupid, but at least it sorta-kinda works.
The problem I’m facing now, which I mysteriously cannot find anyone even mentioning online, is that any element that I put inside a td always ends up being 100% of the width of the cell and the height of the content, no matter what I do.
The div with the class thisisabox in the example above, for example, always ends up being just one line of text in height and 100% of the table cell, even if I define it thus:
<div width="200" height="200"
style="display: block;
width: 200px;
height: 200px;
background: red;">
Everything in me screams that this should produce a 200 × 200 pixel red box, but it doesn’t. It just gets ignored completely.
As far as I can tell, there is nothing in my styles which ought to have any influence on this. The entirety of the styles declarations I have for the bits in the HTML snippet above is this:
table {
width: 100%;
margin: 0;
padding: 0;
}
table, tr, td {
border-collapse: collapse;
}
td {
padding: 35px 0;
border: 0;
}
(It gets inlined and HTML-attributified by the Premailer API before sending, so it’s not because the styles are only declared in the head.)
Is there some way of making Outlook notice specified width and height of elements inside a table cell?
Or am I missing something really obvious that’s making Outlook behave in this infuriating way?
Outlook does not work with div and it in some instances ignores padding.
https://www.campaignmonitor.com/css/box-model/padding/
The way to fix this is simple and it will work with every email client:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
</head>
<body>
<table width="200" height="200" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="leftsidespacer" width="30"></td>
<td class="maincontent" width="140">
<p>All the content here</p>
<div class="thisisabox">
<p>Something here too</p>
</div>
</td>
<td class="rightsidespacer" width="30"></td>
</tr>
</tbody>
</table>
</body>
</html>
I would create a style sheet and add the values which will be picked up by most modern email clients, but Outlook desktop versions like 2007-2016 require a few inline aids to function properly.
Edit: Base table in Outlook 2007
This is the base table in Outlook 2007 with no extra css that I posted above:
This image came out of Litmus.
I only used the code I posted above. If you are not seeing this, something in your CSS or HTML is causing an issue.
Good luck.
Here is something you can try.
Code:
<table cellpadding="0" cellspacing="0" width="200" height="200" bgcolor="#000000">
<tbody>
<tr>
<td height="200"></td>
<td valign="top" style="color:#ffffff;">
All content here
</td>
</tr>
</table>
Result in Outlook version 1803 (tested: 20/04/2018)
What I have done is added a height to the table element as well as one of the cells. You can either populate the left column with a spacer image or keep it as it is.
Note: You can make do without the left column if you wish but do add the height
Hope this is the answer you were looking for.
I'm strunggling at building E-Mail templates. Displaying some words inline using spans (trying to avoid the display property because some outlook versions don't support it) a floating problem occurs.
Problem case: the whole span including padding doesn't fit into the current line, so the text breaks into the next line - fine for now. The "left" padding though unfortunately stays in the first line and gets "cut off" the item as you can see in this screenshot.1
<span style=" line-height:25px; font-family:'Roboto', sans-serif; font-size:11px; background:#EBEBEB; border-radius: 8px;a padding: 3px 10px; margin:0;">
Vollzeit
</span>
<span> </span>
How can I force the padding to stick with the text and make it jump into the next line, too?
(This problem doesn't occur in outlook only but also on several other e-mail clients.)
You might try using tables instead since email clients have notoriously nasty support for a wide gamut of other markup and styles. Chris Coyier has a good article on responsive emails here https://css-tricks.com/ideas-behind-responsive-emails/ Look at the section specifically around 3 columns where he states:
You might think: each of those will be a <td>. But no, if that was the case you'd never be able to get them to wrap in the limited CSS world of emails.
It's yucky looking but, some variation of the following might work http://codepen.io/anon/pen/GoyojN
<table class="main-wrapping-table">
<tr>
<td>
<table align="left" style="width: 33.33%">
</table>
<table align="left" style="width: 33.33%">
</table>
<table align="left" style="width: 33.33%">
</table>
</td>
</tr>
</table>
I wonder why IE doesn't seem to recognize the width I specify?
Basically I have this code:
<table>
<tr>
<td valign="top" align="right" class="left_frame"></td>
</tr>
</table>
CSS:
.left_frame {
background: url(images/side.gif) repeat-y;
width: 17px;
}
Even if I add width="17" inside the <td></td> tags, the width still doesn't change. This is quite frustrating because the problem seems to be very simple.
I'd say it's because there's no content in your <td>
Try adding a in there so the cell has some content, and see how that goes.
Alternatively, placing a height on the cell may work as well, depending on your requirements.
Basically the cell is a flat line at the moment, and needs something to tell it how tall it is, in order to draw the background in.
Example: http://jsfiddle.net/MvBf5/
<html>
<tr>
<td style="padding-left: 5px;padding-bottom:3px; font size="35;""> <b>Datum:</b><br/>
November 2010 </td>
</html>
is my code correct? i would like to increase the font of the first line. Not sure if i have to put 2 "'s here. and it seems it didn't work.
Try this:
<html>
<table>
<tr>
<td style="padding-left: 5px;
padding-bottom: 3px;">
<strong style="font-size: 35px;">Datum:</strong><br />
November 2010
</td>
</tr>
</table>
</html>
Notice that I also included the table-tag, which you seem to have forgotten. This has to be included if you want this to appear as a table.
font-size:35px;
So like this:
<html>
<table>
<tr>
<td style="padding-left:5px;padding-bottom:3px;">
<strong style="font-size:35px;">Datum:</strong>
<br/>
November 2010
</td>
</tr>
</table>
</html>
Although inline styles are a bad practice and you should class things. Also you should use a <strong></strong> tag instead of <b></b>
you dont need those quotes
<td style="padding-left: 5px;padding-bottom:3px; font-size: 35px;"> <b>Datum:</b><br/>
November 2010 </td>
There are a couple of answers posted here that will give you the text effects you want, but...
The thing about tables is that they are organized collections of labels and data. Having both a label ("Datum") and the value that it labels in the same cell is oh so very wrong. The label should be in a <th> element, with the value in a <td> either in the same row or the same column (depending on the data arrangement you are trying to achieve). You can have <th> elements running either vertically or horizontally or both, but if you don't have heading cells (which is what <th> means), you don't have a table, you just have a meaningless grid of text. It would be preferable, too, to have a <caption> element to label the table as a whole (you don't have to display the caption, but it should be there for accessibility) and have a summary="blah blah blah" attribute in the table tag, again for accessibility. So your HTML should probably look a lot more like this:
<html>
<head>
<title>Test page with Table<title>
<style type="text/css">
th {
font-size: 35px;
font-weight: bold;
padding-left: 5px;
padding-bottom: 3px;
}
</style>
</head>
<body>
<table id="table_1" summary="This table has both labels and values">
<caption>Table of Stuff</caption>
<tr>
<th>Datum</th>
<td>November 2010</td>
</tr>
</table>
</body>
</html>
That may not be exactly what you want -- it's hard to tell whether November 2010 is a data point or a label from what you've posted, and "Datum" isn't a helpful label in any case. Play with it a bit, but make sure that when your table is finished it actually has some kind of semantic meaning. If it's not a real table of data, then don't use a <table> to lay it out.
Don't need to quote css attributes and you should specify an unit.
(You should use an external css file too..!)
<html>
<table>
<tr>
<td style="padding-left: 5px;padding-bottom:3px; font-size:35px;"> <b>Datum:</b><br/>
November 2010 </td>
</table>
</html>
just write the css attributes in a proper manner i.e:
font-size:35px;
I suggest you use CSS instead, seems like you're going to repeat those lines later on. But to answer your question:
<html>
<head>
<style type="text/css">
td.randname {
padding-left: 5px;
padding-bottom:3px;
font-size:35px;
}
</style>
</head>
<body>
<table>
<tr>
<td class="randname"> <b>Datum:</b><br/>
November 2010 </td></tr>
</table>
</body>
</html>
The correct CSS for setting font-size is "font-size: 35px". I.e.:
<td style="padding-left: 5px; padding-bottom:3px; font size: 35px;">
Note that this sets the font size in pixels. You can also set it in *em*s or percentage. Learn more about fonts in CSS here: http://www.w3schools.com/css/css_font.asp
As we all know, Outlook 2007 uses the Word 2007 rendering engine, causing endless grief when designing HTML email message. [Insert rant here] In particular, float, margin, and padding are - shall we say? - poorly supported.
To simulate float so that text wraps around an image, apparently we can simply use:
<img src="foo.png" align="right">
The issue is padding/margin. Without padding/margin, the wrapped text butts up against the image which looks goofy. One workaround is to edit the image and add transparent framing that simulates margin.
Does anyone know any other workarounds?
After reading Microsoft's documentation on Outlook 2007 support, I found that using hspace on an image will work to create white space around it similar to padding.
[ img src="image.jpg" align="left" border="0" hspace="10" ]
That will give you the equivalent of 10px of padding. Works pretty well across email clients.
Figured I'd share in case someone else Googling the issue stumbles across this question like I did.
I have tried it this morning and sadly borders on images arnt supported, however, you can implement the concept on the text area :).
border-left: 7px solid #fff;
for example, inside a white container would give the visual effect of left padding....
One place that padding is supported in Outlook '07 is <td> tags. So I have solved this by wrapping the image in a table:
<table cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
<tr>
<td valign="top" style="padding: 0px 10px 0 0;">
<img src="http://www.mysite.com/images/myimage.jpg" style="width:60px; height:100px;" border="0" />
</td>
</tr>
</tbody>
</table>
<p>The text I want to see wrap...</p>
</td>
</tr>
</tbody>
</table>
Note the align="left" is on the parent table as well as the one immediately holding the image. This hack is needed for Outlook 2013. Everything else looked great without it on Litmus.
Adding padding around in image for Outlook and all other email clients.
I found that this works.
img {
padding-left: 25px!important;
padding-top: 25px!important;
padding-bottom: 25px!important;
padding-right: 25px!important;
}
I know this thread is old, but an alternative would be to give the image a solid border the same colour as the container.
If you add a inline style to the img tag with a margin command like this:
<img src="foo.png" align="right" style="margin:5px;">
I'm guessing that is what you're trying to do.