I appear to be getting a 1px white box around my tables in outlook 2007,10 and 13. Ive done border collapse and it hasn't fixed the issue? Want three 200px tables aligned horizontally, but because a 1px border is being applied it thinks they're more than 200px, therefore breaking the alignment. Tried everything so any suggestions appreciated.
<table style="border-collapse: collapse;border:none;padding:0px;margin:0px;" width="600" bgcolor="#B6B6B6" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table style="border-collapse: collapse;border:none;padding:0px;margin:0px;" align="left" bgcolor="#EE070B" width="200" cellpadding="0" cellspacing="0" border="0">
<tr><td>1</td></tr>
</table>
<table style="border-collapse: collapse;border:none;padding:0px;margin:0px;" align="left" bgcolor="#1527EA" width="200" cellpadding="0" cellspacing="0" border="0">
<tr><td>2</td></tr>
</table>
<table style="border-collapse: collapse;border:none;padding:0px;margin:0px;" align="left" bgcolor="#ED7407" width="200" cellpadding="0" cellspacing="0" border="0">
<tr><td>3</td></tr>
</table>
</td>
</tr>
</table>
Outlook adds around 20px around Tables, no matter what. Not sure on the 1px border but try this hack to fool all Outlook versions into thinking your Tables are Table cells: http://labs.actionrocket.co/make_mobile_email_work_in_outlook
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 2 years ago.
I'm developing an email where, by design, the banner image appears to be overlapping into the header. The effect is achieved by taking the top 35px or so of the banner image and making it its own image which sits in the row above the remainder of the banner image.
Here's a mockup with outlines of what I mean; the top portion of the image has a white background, while the rest of the image has a light blue background. The effect is that the image appears to be overlapping into the white.
mockup of email design
However, on some email clients (ran through the Hubspot tester) there's a gap between the images:
gap between images
I've tried the following, with no luck:
cellpadding and cellspacing = 0 to both tables
included table-collapse to my CSS
added margin-bottom to the top image (which only works on some email clients)
tried to valign="bottom" to the top image so it would sit on the bottom of the table
Here's the section of the email code, which works in the Hubspot preview, but not specific email clients:
<!-- TOP PORTION OF BANNER IMAGE -->
<table bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table width="600" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff">
<tr>
<td width="100%">
<table class="devicewidth" valign="center" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr align="center">
<td cellpadding="0" cellspacing="0" style="padding:0" width="100%">
{% linked_image "webinar-editable-bannere-top" label='Banner', link="https://#", open_in_new_tab=True, alt='Banner', src='http://info.mysite.com/hs-fs/hubfs/mysite-now-1.jpg', style='max-width:100%;height:auto;;margin-bottom:-5px' %}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END TOP PORTION OF BANNER IMAGE -->
<!-- REMAINDER OF BANNER IMAGE -->
<table bgcolor="#EDF1FC" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table width="600" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff">
<tr>
<td width="100%">
<table class="devicewidth" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr align="center">
<td valign="top" style="padding:0" width="100%">
{% linked_image "webinar-editable-bannere-bottom" label='Banner', link="https://#", open_in_new_tab=True, alt='Banner', src='http://info.mysite.com/hs-fs/hubfs/mysite-now-1.jpg', style='max-width:100%;height:auto' %}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END REMAINDER OF BANNER IMAGE -->
Are there specific ways I can get those images to align together across the board, outside of the methods I included above?
Fixed the issue by adding a style="display:block" to images.
I am working on HTML email template. There is a small spacing below the image and I am not able to get rid of it. And this space is caused by the DOCTYPE is all I know.
Sample Image
I tried everything possible like:
Adding style="display:block" to the image.
Setting the "Align" Attribute to "absmiddle", "absbottom", "texttop", "middle", "left", "right" and "top".
Setting the Line-Height to 10px or Less by placing the image in div.
Setting Font-Size to 2px or Less.
Using Float:Left or Float:Right.
But nothing seemed to work for me. Can anyone help me figure it out please ?
I having been trying to figure it out for the past two days :P
I have attached the sample code below:
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;">
<tbody>
<tr>
<td style="direction:ltr;font-size:0px;padding:0px;text-align:center;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="" style="vertical-align:top;width:600px;">
<div class="mj-column-px-600 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
<tr>
<td align="center" style="font-size:0px;padding:0px;word-break:break-word;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
<tbody>
<tr>
<td style="width:600px;">
<a href="#">
<img src="./assets/img/hero#3x.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" />
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
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've built an email which features images surrounded by a "polaroid" style border and caption. To do that I built a table around the image with white backgrounds and all works fine except on Outlook 2007 and 2010. Here's how it should look (Outlook 2011 version):
And here's how it displays in 07/10, pushing the tables out of the width of the page and increasing the width of the tables hugely:
Here's the code I've used - the tables are the only elements that cause problems:
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnImageBlock" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody class="mcnImageBlockOuter">
<tr>
<td valign="top" style="padding: 9px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;" class="mcnImageBlockInner">
<table align="left" width="100%" border="0" cellpadding="0" cellspacing="0" class="mcnImageContentContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td class="mcnImageContent" valign="top" style="width:164px;background-color:white;padding-right: 9px;padding-left: 9px;padding-top: 9px;padding-bottom:9px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<table>
<tr>
<td style="max-width:160px;border: 1px solid #b3b3b3;">
<img mc:edit="product 1" class="mcnImage" width="100%" style="max-width:160px;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" mc:edit="Caption 1" class="mcnTextContent" style="padding-top: 9px;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;background-color:white;font-family: Helvetica;font-size: 11px;line-height: 150%;text-align: left;">
<center> </center>
</td>
</tr>
<tr>
<td valign="top" style="padding-top: 0;padding-right: 0;padding-bottom: 0;padding-left: 0;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;background-color:white;text-align: left;">
<img align="center" height="18" src="http://gallery.mailchimp.com/004beaebbdbc9392458d4bde2/images/shadow.1.gif" style="height: 18px;width:100%;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Your table's width is being set to 100% [of its parent container].
<table ... width="100%" ...></table>
The full code hasn't been given, but I can only assume its parent has a width greater than that of the content above.
You can't reliably uses css classes or IDs within an HTML email.
You should only use inline css styles and even them keep them to a bare minimum to ensure maximum email client compatibility.
I don't think using the max-width property will be doing you any favours either. I'd recommend simply setting the actual width on height on the images using the regular width and heights html tags.
Here's a good reference for html emails:
http://kb.mailchimp.com/article/how-to-code-html-emails
Try using the following code (I suggest using this as an embedded style), this always fixes a lot of my Outlook 2007/2010/2013 spacing issues:
table td {border-collapse: collapse;}
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
I'm testing a html email is... Outlook, and it's adding a bizarre unwanted margin to the right of my tables.
The two tables should line up side-by-side, 200px each in a 400px parent table (which collapses to 200px on mobile).
The first clue to Outlook's behavior is that the tables are no longer side-by-side. And when the text is selected the added margin is clearly showing:
Any ideas at all? Here's my code - as you can see I've tried pretty much everything I can think of!!!
<table width="400" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; margin-right: none; witdh: 200px">
<tr style="border-collapse:collapse; margin-right: none; witdh: 400px">
<td style="border-collapse:collapse; margin-right: none; witdh: 400px">
<table width="200" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; margin-right: none; witdh: 200px;">
<tr style="border-collapse:collapse; margin-right: none; witdh: 200px">
<td style="border-collapse:collapse; margin-right: none; witdh: 200px">Box;</td>
</tr>
</table><table width="200" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse; margin-right: none; witdh: 200px;">
<tr style="border-collapse:collapse; margin-right: none; witdh: 200px">
<td style="border-collapse:collapse; margin-right: none; witdh: 200px">Box;</td>
</tr>
</table>
</td>
</tr>
</table>
That's not how tables work in Outlook, I'm sorry!
You need to include all the data in a single table, or wrap a "super table" around your two tables
<table id="supertable">
<tr>
<td width="200">
<!-- Left-hand table goes here -->
<table>
<tr>
<td>Box;</td>
</tr>
<tr>
<td>Box;</td>
</tr>
</table>
</td>
<td width="200">
<!-- Right-hand table goes here -->
<table>
<tr>
<td>Unsubscribe here...</td>
</tr>
<tr>
<td>Change your details here...</td>
</tr>
</table>
</td>
</tr>
When it comes to Outlook HTML (i.e. turn-of-the-century table-bases monstrosity) it's best to sketch your design on graph paper to work out your "grid". Then, you can use the colspan and rowspan attributes of <td>/<tr> elements to lay things out sensibly.
Found a solution! I was having the same problem - I was following the tip for responsive layouts from Campaign Monitor and they do recommend tables side-by-side. Also, form my experience, I can not get to have <td> behave like rows on iOS Mail (works on Mobile Safari, but no longer works when you send it on an email).
Some more googling and I came to a solution: it involves setting borders and wrapping the content of the <td> on a <p>tag. Check step 3. It works!