I know this is pushing reality a bit, but I need to ask this question...
Is it possible to have a fixed background image with no-repeat on, and with a table in front of the image?
My problem at the moment is, that if the table in front of the current image gets to long, (longer than the image height) then the image repeats it self downwards and it looks really ugly and unprofessional.
Div is out of the question, it doesn't work with e-mails that well.
The image is basically from top to bottom a black to light blue shade image.
below is the html template i'm using to merge with my outlook email.
<body style="background: transparent url(<MY IMAGE>;);">
<table align="center" border="0" cellpadding="0" cellspacing="0" width=700">
<tbody style="text-wrap:normal;word-wrap:break-word">
<tr>
<td>
<font face="Verdana"><img height="20" src="<MY IMAGE>" style="width: 700px; height: 20px;" width="1" /></font></td>
</tr>
<tr>
<td>
<font face="Verdana"><img height="80" src="<MY IMAGE>" style="width: 750px; height: 80px;" width="750" /></font></td>
</tr>
<tr>
<td align="left" bgcolor="#FFFFFF" style="padding: 10px;">
<p>
<span style="font-size: 14pt;"><strong><span style="color: rgb(0, 0, 128);"><font face="Verdana">Place Heading here.</font></span></strong></span><br />
<br />
<span style="font-size: 10pt;"><span style="font-family: arial,helvetica,sans-serif;">Place text here.
Place text here.Place text here.
<br />
<br />
</span></span></p>
</td>
</tr>
<tr>
<td>
<font face="Verdana"><img height="90" src="<MY IMAGE>" style="width: 750px; height: 90px;" width="750" /></font></td>
</tr>
<tr>
<td align="left" bgcolor="#83B5D4" style="font-size: 9px; color: rgb(255, 255, 255);">
<font face="Verdana"><img height="10" src="<MY IMAGE>" style="width: 10px; height: 10px;" width="10" /></font></td>
</tr>
<tr>
<td align="center" bgcolor="#162C76" style="padding: 10px;" valign="middle">
<font color="#FFFFFF" face="Verdana" style="font-size: 10px; line-height: 1.5em;">Tel: +27 11 454 1074 | Fax: +27 11 454 1073 | support#psiber.co.za | www.psiberworks.com<br />
15 Seventh Avenue, Edenvale, 1610</font></td>
</tr>
</tbody>
</table>
</body>
The way I got around this was to add a load of colored padding to the image at the bottom. The cell will hide all this until it is pushed down and you don't have to worry about CSS styles not working in various email browsers.
Background images are a pain in a lot of email browsers. You can however 'hack' them into Outlook 2007 if you really need to - http://emailmarketingvoodoo.com/blog/post/outlook-2007-can-now-render-background-images/
Related
I'm having an issue aligning text and an image link next to each other in a table row. The image keeps drifting up and down. I've tried various align middle and display block styles with no luck. I am limited to only having CSS inline and trying to display properly across different devices and desktop email clients. The posted code is a nested table that I can not get the elements to align with each other. Viewing the code in the browser, for the most part, displays correctly. But once the code is in Outlook and other programs the image drifts within the row.
image example
<table cellspacing="0" cellpadding="0">
<td height="100%" align="left">
555-555-5555 |
</td>
<td height="100%" align="left">
stackoverflow.com |
</td>
<td height="100%" align="left" font-size="13px" style="font-size: 13px; line-height:100%;">
<img src="https://i.ibb.co/hf2gbC1/in.png" style="margin-left: 4px; margin-right: 2px" alt="Stack Overflow LinkedIn" width="11" height="11">
</td>
</table>
This is very simple and when tested with Litmus it has consistent results across all email clients. I set the font size, line-height and image size to 13px. Since they were all equal, it made it easier to align. I didn't put an align on the table because it should default to middle-align. On the image I placed vertical-align: -2px; Outlook has buggy support when it comes to using values like middle, but not with number values. in the style sheet and added display: inline-block;. I placed everything in one <td>.
With Gmail, Apple, IOS, Android and other email clients, everything remains consistent. With Outlook, it shifts about a pixel.
I also added text-decoration: none; to the hrefs to clean up the look a bit.
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: 0;">
<tr>
<td style="font-family: sans-serif; font-size: 13px; line-height: 13px; text-decoration: none;">
555-555-5555 |
stackoverflow.com |
<img src="https://i.ibb.co/hf2gbC1/in.png" style="vertical-align: -2px;" alt="United States Appraisals LinkedIn" width="13" height="13">
</td>
</tr>
</table>
Good luck.
I would use valign="bottom" for all tds, and in addition add some padding-bottom to the img tag to correct the slight vertical offset between text and image (actually only 1px in this particular example):
<table cellspacing="0" cellpadding="0">
<td height="100%" align="left" valign="bottom">
555-555-5555 |
</td>
<td height="100%" align="left" valign="bottom">
stackoverflow.com |
</td>
<td height="100%" align="left" font-size="13px" style="font-size: 13px; line-height:100%;" valign="bottom">
<img src="https://i.ibb.co/hf2gbC1/in.png" style="margin-left: 4px; margin-right: 2px; padding-bottom: 1px;" alt="United States Appraisals LinkedIn" width="11" height="11">
</td>
</table>
writing html for email is like a trip back to the 90ies!
if you wrap all your <td> inside a tabelrow <tr> and set it's valign to bottom,
just run the code snippet:
<table cellspacing="0" cellpadding="0">
<tr height="20px" valign="bottom" bgcolor="#FFFFCC" >
<td height="100%" align="left">
555-555-5555 |
</td>
<td height="100%" align="left">
stackoverflow.com |
</td>
<td height="100%" align="left" font-size="13px" style="font-size: 13px; line-height:100%;">
<img src="https://i.ibb.co/hf2gbC1/in.png" style="margin-left: 4px; margin-right: 2px" alt="United States Appraisals LinkedIn" width="11" height="11">
</td>
</tr>
</table>
What is the correct inline css to move text or an image center in Outlook. Any time I open it in a browser, it looks great but the bottom image and text always stay left in Outlook. Not sure what else to try. Any help is appreciated
<table cellpadding="0" cellspacing="0" border="0" width="800" align="left">
<table align="left" width="800px;">
<tr width="800px">
<td><img width="800px;" src="images/ArlingtonPic-edited.png"></td>
</tr>
</table>
<table align="left" width="800px;">
<tr width="800px">
<td width="800px" style="font-size:20px; margin-left: auto;
margin-right: auto; text-align: center; vertical-align: middle;">
<strong>Arlington Concrete Floor Boxes</strong></td>
</tr>
</table>
<table align="left" width="800px;">
<tr width="800px">
<td width="350px" style="font-size:16px; padding: -10px 10px 0 10px;">
<p>Our NEW heavy-duty<strong>FLBC4502</strong> 4.5"<strong> concrete floor
box</strong> has more! <strong> <span style="color: red">SIX conduit hubs and FOUR plugs.</span></strong>
And the NEW FLBC4502LR leveling ring makes
installation easier than ever on our FLBC4500
and FLBC4502, and others concrete boxes. <br>
It is <em>REVERSIBLE!</em></p>
</ul>
</td>
<td width="350px" style="font-size:16px; padding: 0 10px;">
<p>The screw holes on SIDE A fit all 4.5" boxes,
and accommodate our 6" round covers,
and most others on the market.
SIDE B features a second set of holes
that fit a cover with a 3-3/8" hole pattern.
These Arlington <strong>cover kits</strong> fit
our concrete boxes. <br>
<em>That is convenience!</em></p>
</td>
</tr>
</table>
<table align="left" width="800px;">
<tr width="800px">
<td width="800px" style="margin-left: auto; margin-
right: auto; text-align: center; vertical-align: middle;">
<img src="images/ArlingtonLogo.png">
</td>
</tr>
</table>
On your table cell use following attributes:
<td valign="middle" align="center">...</td>
for vertical and horizontal align.
This will add image in center in outlook.
<table width="100%">
<tr>
<td align="center">
<img src="https://4de5ad3168da.png" align="middle" width="200" height="130">
</td>
</tr>
</table>
I'm building a responsive newsletter which display correctly in every browsers and email clients except Outlook 2007 & 2010 (though it's ok on Outlook 2003 and previous, and on 2013 and upper versions).
There is an extra 18px space added inside one of the table cells of this header:
With some explanations:
1 is a a table inside my first cell, which seems to have the valid height (186px). 2 and 3 pictures are 186px height, but their cells are bigger.
Here is the header html:
<tr>
<td align="left" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="left" valign="top" style="border-collapse: collapse !important; background-color:#ffffff;" bgcolor="#ffffff">
<tr>
<td width="225" height="186" bgcolor="#7c64a9" class="nd-bandeau-cell1" style="background-color: #7c64a9">
<table width="100%" align="left" valign="top" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;">
<tr>
<td width="20" rowspan="5" class="head-left-margin"> </td>
</tr>
<tr>
<td height="9" align="left" valign="top" class="nd-bandeau-left-top-cell" style="mso-line-height-rule: exactly; font-size: 9px; line-height: 9px;">
<img src="http://mywebsite/img/head-left-top.gif" width="205" height="9" alt="" class="nd-bandeau-left-top" style="display: block;" />
</td>
</tr>
<tr>
<td height="120" align="right" valign="bottom" class="nd-bandeau-titre-cell">
<img src="http://mywebsite/img/titre-lettre.jpg" width="204" height="71" alt="La lettre de votre patrimoine" class="nd-bandeau-titre" style="font-family: Arial, sans-serif; color: #ffffff; font-size: 20px;" />
</td>
</tr>
<tr>
<td height="44" align="left" valign="top" class="nd-bandeau-stitre-cell" style="font-family: Arial, sans-serif; font-weight: bold; font-size: 14px; color: #ffffff;">
N°1 | Octobre 2015
</td>
</tr>
<tr>
<td height="13" align="left" valign="top" class="nd-bandeau-left-bottom-cell" style="mso-line-height-rule: exactly; font-size: 13px; line-height: 13px;">
<img src="http://mywebsite/img/head-left-bottom.gif" width="205" height="13" alt="" class="nd-bandeau-left-bottom" style="display: block;" />
</td>
</tr>
</table>
</td>
<td width="178" height="186" align="left" valign="middle" class="nd-bandeau-cell2">
<img src="http://mywebsite/img/bandeau-left.jpg" width="178" height="186" alt="" style="display: block; background-color: #c3b9b1;" />
</td>
<td width="197" height="186" align="left" valign="middle" class="nd-bandeau-cell3">
<img src="http://mywebsite/img/bandeau-right.jpg" width="197" height="186" alt="" style="display: block; background-color: #c3b9b1;" />
</td>
</tr>
</table>
</td>
</tr>
I tried many fix, none worked: adding line-height to the cells that contains image with mso-line-height-rule: exactly before, collapsing HTML to remove any space, changing doctype... I'm a little out of ideas here, anyone have any clue of what is happenning here?
it's because you have a cell (line 7) that is < 15px tall. Outlook 2007 and 13 will expand whatever cell you have that's under to 15.
a workaround:
<tr valign="bottom">
<td height="9" style="font-size:9px; line-height:9px;">
</td>
</tr>
i usually get around doing that by using padding-top and bottom on tds (nesting tables where needed)
I found out what was wrong, and it was pretty trivial. The first row of my table (the one with rowspan) was missing a second cell - so the table layout was wrong.
Just by changing :
<tr>
<td width="20" rowspan="5" class="head-left-margin"> </td>
</tr>
<tr>
<td height="9" align="left" valign="top" class="nd-bandeau-left-top-cell">
<img src="http://mywebsite/img/head-left-top.gif" width="205" height="9" alt="" class="nd-bandeau-left-top" style="display: block;" />
</td>
</tr>
To :
<tr>
<td width="20" rowspan="4" class="head-left-margin"> </td>
<td height="9" align="left" valign="top" class="nd-bandeau-left-top-cell">
<img src="http://mywebsite/img/head-left-top.gif" width="205" height="9" alt="" class="nd-bandeau-left-top" style="display: block;" />
</td>
</tr>
Fixed the issue. After that I still had one pixel vertical spacing after my images that are in cells with height < 15px. Thanks to zazzyzeph answer, I fixed it by changing the line-height and font-size to 0px (setting the height of the image didn't worked for me) with mso-line-height-rule, adding margin: 0 on the image and by collapsing the code to leave no space before/after the picture.
For example:
<td height="9" align="left" valign="top" class="nd-bandeau-left-top-cell" style="mso-line-height-rule: exactly; font-size: 0px; line-height: 0px;"><img src="http://mywebsite/img/head-left-top.gif" width="205" height="9" alt="" class="nd-bandeau-left-top" style="display: block;" /></td>
With all those fix my header now show perfectly on all email clients.
I have a design of an email template, and I am tinkering about the best way to tackle the styling of the following element in HTML/CSS. Note a few things:
Since it's for an HTML email, mainly tables will be used.
Using negative margins will probably not be compatible with different mail clients.
Note the white border around the button
Would you recommend using a background image for this entire block? Or is there an elegant way that will look like this and works across clients.
Here's my set-up: http://jsfiddle.net/ZHkdV/
Here you go - only need a 30x30 image for the top corner:
<table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#F1F1F1">
<tr>
<td width="30" height="30">
<img style="margin: 0; border: 0; padding: 0; display: block;" src="" width="30" height="30" alt="">
</td>
<td width="240" height="30">
</td>
<td width="30" height="30">
</td>
</tr>
<tr>
<td width="30" height="160">
</td>
<td width="240" height="160" valign="top">
<font style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #757575;">
<br>
some text here
</font>
</td>
<td width="30" height="160">
</td>
</tr>
<tr>
<td width="300" height="40" colspan="3" bgcolor="#FFFFFF"><!-- undeclared light gray as Outlook can add spaces at bottom of this td on forwarding (hides unwanted line) -->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" height="20" bgcolor="#F1F1F1">
</td>
<a href="" style="color: #757575; font-weight: bold; text-decoration: none;"><!-- css button, you can lose this and put a href'd image in the cell if you prefer. -->
<td width="200" height="40" bgcolor="#CBBCDC" rowspan="2" valign="middle" align="center">
<font style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #757575;">
BUTTON
</font>
</td>
</a>
<td width="50" height="20" bgcolor="#F1F1F1">
</td>
</tr>
<tr>
<td width="50" height="20" bgcolor="FFFFFF">
</td>
<td width="50" height="20" bgcolor="FFFFFF">
</td>
</tr>
</table>
</td>
</tr>
</table>
This should hold up in all clients...
For e-mail templates, you don't have to worry about validation, so you can use pretty 'hacky' html. One way round client compatibility is to have every row be a table in and of itself, set inside one main 'wrapper' table.
Then you can set as many divisions as you want in each, remembering to reset the borders on each table, row and cell.
Each cell gets it's own image or slice of an image. For the last row you could simply have one image in an anchor tag. Also remember to keep all styling on elements inline.
The html email Boilerplate is pretty much bulletproof.
http://htmlemailboilerplate.com/
<table> <!- Wrapper ->
<tr>
<td>
<table>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
Background images aren't very compatible either:
http://www.campaignmonitor.com/css/
I would just slice the last row into 3 separate images (left, button, right).
If you would rather have one image for the whole row, you can also use an image map to just make the button part a link.
I am having trouble getting a table to correctly nest inside another in IE, but it works fine in Firefox and Chrome. For some reason IE is showing the cell with the nested table as much wider then it is set to be.
Simplified version of my code:
<table width="575" border="0">
<tbody>
<tr>
<td height="10" colspan="3"><span style="FONT-SIZE: 12px"><span style="FONT-FAMILY: Arial">CITY (Arial, small, all caps), Country (only if city isn't well known, Arial, small) - Content text (Arial, small) First paragraph is to be full width and above any images or related boxes, unless there is a lead.<br />
</span></span></td>
</tr>
<tr>
<td height="10" colspan="3"></td>
</tr>
<tr>
<td width="280"><span style="font-size: 12px;"><span style="font-family: Arial;">Half-width items: Text next to images or related boxes is to match or slightly exceed height of image or related box it sits next to with the tops set to align. First half-width image in an article or any related box goes on the right side of the page. </span></span></td>
<td width="10"></td>
<td width="260" valign="top">
<table width="260" border="0">
<tbody>
<tr>
<td>
<div style="width:260px;border:2px groove black;padding:5px;"><strong><span style="font-size: 14px;"><span style="font-family: Arial;">Related Links - Arial, medium, bold</span></span></strong><br />
<span style="font-family: Arial;"><span style="font-size: 12px;"><span style="font-size: 2px;"><br />
</span> • To be used when relevant links exist<br />
<span style="font-size: 2px;"><br />
</span> • Links to remain one line or shorter<br />
<span style="font-size: 2px;"><br />
</span> • Link text - Arial, small, linked<br />
</span></span></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="10" colspan="3"></td>
</tr>
</tbody>
Thank you for any help. I just can't figure out why IE won't play the same as the other browsers.
FYI, you can achieve this in CSS without using tables.
I changed the width from pixels to percentage and it works fine in IE now...
<tr>
<td width="44%"><span style="font-size: 12px;"><span style="font-family: Arial;">Half-width items: Text next to images or related boxes is to match or slightly exceed height of image or related box it sits next to with the tops set to align. First half-width image in an article or any related box goes on the right side of the page. </span></span></td>
<td width="2%"></td>
<td width="44%" valign="top">
<table width="100%" border="0">
<tbody>
<tr>
<td>
<div style="width:260px;border:2px groove black;padding:5px;"><strong><span style="font-size: 14px;"><span style="font-family: Arial;">Related Links - Arial, medium, bold</span></span></strong><br />
<span style="font-family: Arial;"><span style="font-size: 12px;"><span style="font-size: 2px;"><br />
</span> • To be used when relevant links exist<br />
<span style="font-size: 2px;"><br />
</span> • Links to remain one line or shorter<br />
<span style="font-size: 2px;"><br />
</span> • Link text - Arial, small, linked<br />
</span></span></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
Not sure why you are using colspan="3" while you can do away with two.
Anyway, test the above code to check if this is what you are after...
Thanks.
ADDED:
I removed the width for the td's and that works fine as well. Not sure why IE is rendering it differently when the width is supplied.
<tbody>
<tr>
<td height="10" colspan="3"><span style="FONT-SIZE: 12px"><span style="FONT-FAMILY: Arial">CITY (Arial, small, all caps), Country (only if city isn't well known, Arial, small) - Content text (Arial, small) First paragraph is to be full width and above any images or related boxes, unless there is a lead.<br />
</span></span></td>
</tr>
<tr>
<td height="10" colspan="3"></td>
</tr>
<tr>
<td><span style="font-size: 12px;"><span style="font-family: Arial;">Half-width items: Text next to images or related boxes is to match or slightly exceed height of image or related box it sits next to with the tops set to align. First half-width image in an article or any related box goes on the right side of the page. </span></span></td>
<td></td>
<td valign="top">
<table border="0">
<tbody>
<tr>
<td>
<div style="width:265px;border:2px groove black;padding:5px;"><strong><span style="font-size: 14px;"><span style="font-family: Arial;">Related Links - Arial, medium, bold</span></span></strong><br />
<span style="font-family: Arial;"><span style="font-size: 12px;"><span style="font-size: 2px;"><br />
</span> • To be used when relevant links exist<br />
<span style="font-size: 2px;"><br />
</span> • Links to remain one line or shorter<br />
<span style="font-size: 2px;"><br />
</span> • Link text - Arial, small, linked<br />
</span></span></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="10" colspan="3"></td>
</tr>
</tbody>