I'm going absolutely crazy. I have a table, which I've simplified down to two adjacent cells with one image each (the images are part of a larger picture, so there can be NO spacing between them). I'm getting some spacing or padding between the table cells, just on the left and right, not the top or bottom. I've tried everything I can find on forums, both inline html as well as inline CSS styling, including:
cellpadding="0"
cellspacing="0"
border="0"
align="left"
display: block;
display: inline-block;
display: inline-table;
border-collapse: collapse;
border:none;
mso-table-lspace:0;
mso-table-rspace:0;
width:403px!important;
padding-left: 0px;
padding-right: 0px;
padding: 0 0 0 0;
margin: 0 0 0 0;
margin-left: 0px;
margin-right: 0px;
No combination of any of these attributes seem to work. Here is my code if you want to take a look (remember, this is a reduced version). It works perfectly fine in my browser, but when I paste it into Outlook I get spacing before, between and after each cell. I have created a magenta background so I can see the spacing clearly.
<table align="left" border="0" cellpadding="0" cellspacing="0" style="
border:none;
border-collapse:collapse;
background-color:magenta;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
line-height:15px;
color:#4A4A4A;
width:403px!important;
mso-table-lspace:0;
mso-table-rspace:0;
">
<tr>
<td width="211">
<img src="http://s3.amazonaws.com/cms_assets/accounts/3ceae742-b87e-4bdc-a6b3-2bcfc1c5c2d7/site-30100/cms-assets/images/457997.seal-bar-gold.png" width="211"/>
</td>
<td width="192">
<img src="http://s3.amazonaws.com/cms_assets/accounts/3ceae742-b87e-4bdc-a6b3-2bcfc1c5c2d7/site-30100/cms-assets/images/569397.seal-bar-silver.png" width="192"/>
</td>
</tr>
</table>
<img> it is inline tag, by default, therefore we have space under it. You can set font-size: 0px; for parent to prevent empty space, or set display: block; to <img> (my choice).
My solution and article about this behaviour
Related
I have created a HTML email and seem to be having issues on some outlooks and mobile outlook with the table cells borders I have attached an image of the issue there seems to be a thin lines where the table cells are.
CSS
html { width: 100%; }
body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; margin: 0; padding: 0; }
table { border-spacing: 0; border-collapse: collapse; }
table td { border-collapse: collapse; font-family: Arial,sans-serif; line-height:1.4 }
HTML
<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="006680" align="center">
<tr>
<td height="10" bgcolor="fd6b0d"></td>
</tr>
</table>
<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="006680" align="center">
<tr>
<td width="50" bgcolor="fd6b0d"></td>
<td bgcolor="fd6b0d">
<p style="font-family: Verdana; font-size: 28px; color: #fff; margin: 0; padding: 0; line-height: 60px; text-align: center; font-weight: bold;">
How Confident Are You?
</p>
</td>
<td width="50" bgcolor="fd6b0d"></td>
</tr>
</table>
I thought this was a common issue known as the Outlook Line bug but it isn't.
I couldn't see lines on the desktop versions, but only on the mobiles--because your template is not responsive. So, the Outlook rendering engine is adding an "outlook-overflow-scaling" span wrapper around your tables to compensate.
If you were to make your table responsive (so, for example use width 100%), it would not need to try and scale the email.
I have done plenty of searching both on stackoverflow and other sites and haven't found a single solution that has worked for me yet. I have attached a screenshot of the webpage to see the problem more clearly. If anyone has any tips or tricks that have not already been tried in my code then please let me know! I have tried all the ideas from former VERY similar posts but for some reason none of them are working for me. Thanks in advance.
HTML:
<table>
<tr>
<td><img border="0" alt="java" src="websitePics/med_high.png" width="568.5" height="296.5"></td>
<td><img border="0" alt="python" src="websitePics/med_high.png" width="568.5" height="296.5"></td>
<td><img border="0" alt="htmlcss" src="websitePics/med_high.png" width="568.5" height="296.5"></td>
</tr>
<tr>
<td>text box describing level for java</td>
<td>text box describing level for python</td>
<td>text box describing level for html/css</td>
</tr>
</table>
CSS:
table {
border-collapse: collapse;
border-spacing: 0px;
}
td {
border: none;
margin: 0;
padding: 0;
line-height: 0;
display: block;
font-size: 0;
img {
vertical-align: top;
border: none;
margin: 0;
padding: 0;
font-size:0;
display: block;
}
You have defined the with of your .png images to be 568.5 pixels, which means the table width will be about 1704 px wide, which is probably wider than the width of your page template.
You want the images to scale to fit the width of the table cells.
you can do this setting a width to the td (33%) and then letting the images scale to a width of 100%.
Note: I built a flexible/responsive layout, which I think might be what you need.
table {
border-collapse: collapse;
border-spacing: 0px;
width: 100%;
border: 1px solid blue;
}
td {
border: none;
padding: 0;
width: 33%;
}
img {
display: block;
width: 100%;
}
tr.labels td {
background-color: beige; /* for demo only */
text-align: center;
padding: 20px 0;
}
tr.images td {
padding: 5px; /* for demo if so needed */
}
<table>
<tr class="images">
<td>
<img border="0" alt="java" src="http://placehold.it/568x296">
</td>
<td>
<img border="0" alt="python" src="http://placehold.it/568x296">
</td>
<td>
<img border="0" alt="htmlcss" src="http://placehold.it/568x296">
</td>
</tr>
<tr class="labels">
<td>text box describing level for java</td>
<td>text box describing level for python</td>
<td>text box describing level for html/css</td>
</tr>
</table>
The padding is already set to 0 in your CSS and table cells are unaffected by margins, so this is not the issue. Table cells expand to the size of their content. Your images are each 568.5px x 296.5px. To get rid of this extra space, decrease the size of your images in the markup, or crop them in your image editor of choice.
I am designing a responsive email template and i have a slight problem on Outlook Web app.
I found out that it removes classes so there is no point in using media queries so i try to hide a tr element like this :
<tr style="mso-hide:all;
display:none;
height:0;
width:0px;
max-height:0px;
overflow:hidden;
line-height:0px;
float:left;">
But it still shoes up. Any Ideas?
You can add the
<tr style="visibility: hidden"></tr>
However, this only makes it not visible... It is still there and taking up space
Use such class:
.hide {
display: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
Blockquote
I'm not entirely sure way you need a hidden table row, but try this:
<tr style="mso-hide:all;
display:none!important;
height:0;
width:0px;
max-height:0px;
overflow:hidden;
line-height:0px;
float:left;">
This may not work as email clients remove some of the CSS, specially lines that will hide code. It will also remove any links to js or external code. So !important will probably be ignored as well.
Lastly trying to hide content is a huge red flag for spam filters, likely whatever you send with this will end up in the spambox.
We use a combination of tables to hide and show different content. Depending on the size of the image you can adjust the height and width of the td.
Styles:
td.inner { display:none; }
table.promo_1_pic_1 { float: none; width:100%; height:95px; }
table.promo_1_pic_1 td { background: #fff url(test.jpg) no-repeat 0px !important; }
table.promo_2_pic_2 { float: none; width:100%; height:95px; }
table.promo_2_pic_2 td { background: #fff url(test.jpg) no-repeat 0px !important; }
table.promo_3_pic_3 { float: none; width:100%; height:109px; }
table.promo_3_pic_3 td { background: #fff url(test.jpg) no-repeat 0px !important; }
table.promo_4_pic_4 { float: none; width:100%; height:109px; }
table.promo_4_pic_4 td { background: #fff url(test.jpg) no-repeat 0px !important; }
HTML:
<td class="desktop-table" bgcolor="#ffffff" style="padding:20px; background-color:#ffffff; font-family: Arial, Helvetica, sans-serif;">
<!-- promo 1 content -->
<table class="promo_1_pic_1"><tr><td></td></tr></table>
<table class="promo_2_pic_2"><tr><td></td></tr></table>
<table class="promotion">
<tr>
<td class="inner"><img src="test.jpg" alt=""/>
</td>
<td class="inner"><img src="test.jpg" alt=""/>
</td>
</tr>
</table>
</td>
<td class="desktop-table" bgcolor="#ffffff" style="padding:0 10px 10px 10px; background-color:#cfe6f6; font-family:Arial, Helvetica, sans-serif;">
<!-- promo 1 content -->
<h3 style="margin:25px 0px 0px 22px;">You might also be interested in:</h3>
<table class="promo_3_pic_3"><tr><td></td></tr></table>
<table class="promo_4_pic_4"><tr><td></td></tr></table>
<table class="promotion">
<tr>
<td class="inner"><img src="test.jpg">
</td>
<td class="inner"><img src="test.jpg">
</td>
</tr>
</table>
</td>
I had the same problem all day yesterday, I found this question here and seems no correct answer. Then I searched in Litmus community forum. And fortunately saw a comment saying:
Also note with mso-hide:all, that if you are trying to hide content within the table cell that includes nested tables, you must apply this property to any and all nested tables within as well.
So I added mso-hide:all to all child tables, and it worked!
Wrap whatever you need to hide in a div.
div {
width: 0;
height: 0;
overflow: hidden;
}
To keep this question up to date, OWA does accept classes now, and can be targeted by adding [owa] to the start of the class list in css.
[owa] .hide,
.hide {
display: none!important;
mso-hide: all;
width: 0;
min-width: 0;
max-width: 0;
height:0;
min-height: 0;
max-height: 0;
overflow: hidden;
font-size: 0px;
line-height: 0px;
}
With this adding .hide to the element you want to hide, will hide it in all popular email clients, if you want to hide from just outlook (excl OWA), then I'd suggest using conditional code. The following table will be hidden in all email clients. Although it will appear when the email is forwarded from certain email clients.
<!--[if !mso]><!-- -->
<table class="hide">
Hide me
</table>
<!--<![endif]-->
I am trying to make the button align up with the textbox, but I can not get it to work, if you need more code, I will be glad to post it :)
Here is my code: http://jsfiddle.net/Hunter4854/FFcAu/
<table class="chatMain" width="100%" height="100%" cellpadding="10" cellspacing="0" border="0">
<tr>
<td align="center" class="MainView" valign="middle">1</td>
<td align="center" valign="middle" class="SideAd" width="185px" rowspan="3">AD</td>
</tr>
<tr>
<td align="center" class="controls" valign="middle">
<textarea class="chatInput"></textarea>
<button type="submit">Send</button>
</td>
</tr>
</table>
Try to add vertical-align: middle to form elements themselves.
Entire contents (as a solid thing) of table cell are vertically aligned within the cell while mutual aligning of each inline element inside contents is specified via vertical-align of these inline elements, not table cell.
Add display: block and float: left to your .chatInput and button class:
.chatInput
{
display:block;
float:left;
width: 500px;
font-size: 12pt;
height: 75px;
box-sizing: border-box;
border: 1px solid #000;
padding-left: 5px;
padding-right: 5px;
outline: none;
resize:none;
}
button {
display:block;
float:left;
height:75px;
}
Fiddle: http://jsfiddle.net/kboucher/xH8sm/
I have the following simple table to reproduce the issue:
<TABLE>
<TR>
<TD style="border: black solid 1px; width:24px; height:68px; margin:0px; padding:0px" >
<IMG
style="width: 24px; height: 68px; margin:0px; padding:0px; border:none"
src="Image24x68.png">
</TD>
</TR>
</TABLE>
The image is actually 24x86 pixels large. The border is just to mark the cell's boundaries. There is no css file assigned to the document.
I want the cell to be exactly as large as the image.
The problem is: the table cell gets always rendered a few pixels too high in any IE version (6, 7, 8) while it works fine in Firefox and other browsers.
Is there any solution / workaround for this?
You can set the images to display as block elements and this should remove the space.
<IMG style="display: block; width: 24px; height: 68px; margin:0px; padding:0px; border:none" src="Image24x68.png">
Looks like this: http://www.evilfish.co.uk/2007/07/31/ie-white-space-after-image-bug/
Remove all whitespace between the image and the closing td tag. In front of the image it doesn't seem to matter.
I tried all the other solutions on this page:
using display:block
removing whitespace in the <td> tags (i.e. I used <tr> and <td> tags without putting any whitespace between them)
using
padding:0px;
border-spacing:0px;
border-style:none;
border-collapse: collapse;
margin:0;
overflow: hidden;
Except for approach (1), these didn't work on IE. After tearing my hair out for three hours, I found this better solution: add a hspace=0 attribute to the image tag. For example:
<img src="http://www.printersrose.com/css/myimages/book1.jpg" alt="Header1"
class="ImageHeader" hspace="0">
I set up an example of this at http://www.PrintersRose.com.
Try the following:
<table>
<tr>
<td style="border: 1px solid black; font-size: 1pt;">
<img style="width: 24px; height: 68px; margin: 0;
padding: 0; border: 0" src="Image24x68.png" />
</td>
</tr>
</table>
(PS Use lower case for HTML tags.)