I'm building an email and for some reason my table widths alter when viewing in Outlook 2013 DPI 120. This is a new email client added into Litmus so I'm not sure how to fix. I have three tables in one full width table and the widths are changing, breaking the layout. Any ideas how to fix?
<table align="left" border="0" cellpadding="0" class="fullWidth" style=
"padding:0px; margin:0px;border:1px #333 solid;" width="178">
<tr>
<td style="padding:20px;">
<table align="left" border="0" cellpadding="0" cellspacing="0"
width="100%">
<tr>
<td style="color:white;text-align:center;padding:10px 5px;font-size:13px;
font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;border-bottom:1px solid #fff;">
<strong>A title</strong></td>
</tr>
</table>
</td>
</tr>
</table>
It is fine in every other client.
The issue is due to Outlook scaling the content to a larger size, forcing your images and other declared items to resize. This can destroy your layout and there is really nothing you can do to change it - it is a setting client-side on the subscribers computer.
Your best way to fix this is to use MSO conditionals to wrap into a single table and separate each column into a separate td. Or to use the TD or TH stack (TD no longer works in Android) with media queries. Outlook will stretch the table to fit two columns, but will not stretch the table to fit two tables, it will instead force the second table below the first.
Related
So,
I've made an email, with HTML4.01
Strickly using nested tables.
<body bgcolor="#666666">
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#666666">
<tr>
<td width="600" height="60">
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="600" height="60" align="center"><span style="font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF"><br>
Etkö näe tätä viestiä? Siirry HTML-versioon
</span></td>
</tr>
</table>
</td>
</tr>
Like this, for example. There is over 800 lines of code in this one document.
Now i've been asked to make a resposive single page site out of the same content.
My question is, is there a easy or semi-easy way to make responsive page out of HTML tables ?
As you can see, there is lots of hard-coded widths and heights
I would love to skip some of the work with some crazy css trick.
I did a google search and found this https://www.w3schools.com/howto/howto_css_table_responsive.asp but it didnt do anything, atleast for now.
Style 1#
I removed all the pixel and point fixed sizes inside every td and tr.
It was painful and slow and i much rather use #2 now...
Style #2
I just redid everything with bootstrap grids,
once you understand bootstrap grid, its way faster than looking for fixed sizes in tables. It will also be much easier to make changes once you have your template.
I have noticed a 'bug' or whatever with Internet Explorer when viewing HTML emails. I'm using Version 11 and its still present.
If I want to align a table in the center of the page, it is also causing the text in any <td> cells to be centered, even if I set the attribute to align="left" and use inline CSS to specify text-align="left".
Here is some example code (try sending this as a HTML email to your yahoo or gmail account and view it in IE):
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="background:#CCC;">
<tr>
<td>
<table width="650px" border="0" align="center" cellpadding="0" cellspacing="0" style="padding-left:11px;padding-right:11px;background:#FFF;">
<tr>
<td align="left" valign="top" style="text-align:left;">Moreover, while in most other animals that I can now think of, the eyes are so planted as imperceptibly to blend their visual power, so as to produce one picture and not two to the brain; the peculiar position of the whale's eyes, effectually divided as they are by many cubic feet of solid head, which towers between them like a great mountain separating two lakes in valleys; this, of course, must wholly separate the impressions which each independent organ imparts.<br><br> The whale, therefore, must see one distinct picture on this side, and another distinct picture on that side; while all between must be profound darkness and nothingness to him. Man may, in effect, be said to look out on the world from a sentry-box with two joined sashes for his window. But with the whale, these two sashes are separately inserted, making two distinct windows, but sadly impairing the view. This peculiarity of the whale's eyes is a thing always to be borne in mind in the fishery; and to be remembered by the reader in some subsequent scenes.</td>
</tr>
</table>
</td>
</tr>
</table>
You should see that the text will be center aligned rather than left aligned. This 'bug' is only present when viewing the code as an HTML email. If you view it as a webpage then it works fine!
I have tested it using web versions of Outlook and Yahoo as well as a different online mail account and the problem is the same only in IE. I tried it in Chrome, Firefox, and Android's built-in browser and it works fine.
I don't understand how to fix it other than not to have my tables centered in the middle of the page. It doesn't look aesthetically pleasing to have my email contents to the left of the page either.
Instead of using align="center" in your parent table tag, try putting it in the parent <td>. Also lose the align="center" on your child table tag, and you don't need CSS text-align:
<table bgcolor="#CCCCCC" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table bgcolor="#FFFFFF" width="650px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top" style="padding-left:11px; padding-right:11px;">
Your text here...
</td>
</tr>
</table>
</td>
</tr>
</table>
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.
<table width="825" border="0" cellspacing="1" class="tableLines1" cellpadding="0">
<tr>
<td align="left" valign="middle">Account / BIC</td>
<td align="left" valign="middle">Name</td>
<td align="left" valign="middle">Email Address</td
</tr>
<tr>
<td ><%=Data.getAccount())%></td>
<td ><%=Data.getName())%></td>
<td width="250px"><%=Data.getEmailAddress())%></td>
</tr>
</table>
I have the following table. This data object get populated from database. The problem is when email address gets bigger the width of table also increases. For example
emailAddress = lolol#ghgg.fdg, jjjjjjoj#hiuh.com, jojo#hsc.comddddddddddddddddddddddddddddddddd
then html intelligently breaks it from spaces and make three two rows like this.
lolol#ghgg.fdg, jjjjjjoj#hiuh.com,
jojo#hsc.comddddddddddddddddddddddddddddddddd
but what i want is that if emailAddress size increases a certain value table size i.e column width should remain constant.
lolol#ghgg.fdg, jjjjjjoj#hiuh.com,
jojo#hsc.comdddddddddddddddddddddd
ddddddddddd
To be more specific i want the data to be displayed as shown above!
Can anyone please guide me. Thanks !
Edited : I want html to intelligently decide the column widths itself. Just not itself increase the table width from the specified value !
Use this CSS rule: word-wrap: break-word;
break-word means the text will wrap to next line.
word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.
you can try wrapping your email address in a div with overflow set to hidden or scroll
<td width="250px"><div style="overflow:hidden; width:100%"><%=Data.getEmailAddress())%></div></td>