can anyone help me with my problem? I try to build newsletter with couple table segments because mailchimp have problem with code and break my mail content if he is not in the table. Main problem for me is image over image. Please, take a look at my code.
Pattern is bottom image and have 100% size (700x50px) and logo is top image (32x32px). Logo must to be on right side and over pattern image with margin-top -20px and margin-right 30px but without using "position" property (mailchimp break all position property).
Right now, my logo is under pattern. I was try to fix this problem with z-index but nothing happens here.
<table class="header_class">
<td>
<img class="pattern_header"src="pattern.jpg" alt="pattern" />
<img class="logo_small"src="logo.jpg" alt="logo" align="right"/>
<h1>July 2017</h1>
</td>
</table>
my css:
pattern_header{
max-width: 700px;
}
logo_small{
margin-right: 30px;
margin-top: -20px;
}
(I am totally beginner and maybe my code isn't ok)
What the header should look like:
For background to work on emails you can use positions (as you have found out). For backgrounds to work in Outlook you need to use VML (vector markup language), this is native to outlook (>2007). All the rest of the email clients should be able to read the background declaration on the td.
Few things to note in the below code:
I have added [HEIGHT OF IMAGE] where you need to add the height for the VML.
You have not provided image dimensions which you will need for logo. Note Outlook doesnt read style attributes on images.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="https://i.stack.imgur.com/UX7Jw.png" style=" background:url(https://i.stack.imgur.com/UX7Jw.png);background-image:url(https://i.stack.imgur.com/UX7Jw.png);">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:700px;height:159;">
<v:fill type="frame" src="https://i.stack.imgur.com/UX7Jw.png" color="#e9e9e9" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="right" valign="top" style="padding:30px 30px 30px 0px;"><img class="logo_small" src="https://i.stack.imgur.com/164VA.png" alt="logo" align="right"/></td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
Let me know if this works for you.
This is what I need. Logo alignment is not to the top (offset from top 20px and from right 30px). Pattern alignment is top.
Example
Related
Coding inline and with tables, I made a simple HTML e-mail signature that contains two images. When I send it from MacOS Mail several different clients, it works well on desktop. On iOS Mail, it shrinks down the size of the table, which is expected behavior, but it makes it significantly smaller than it needs to be, thus making my font-sizes tiny.
The table has a 3 row, 2 column structure, two colored rows and one white one which has a colspan for full table width.
Things I have tested to no effect:
more or less text content
giving the cells a width in pixels
giving the whole table width:100%
marking images display:block or display:inline
Apparently iOS Mail thinks the table is wider than it is, or at least treats it that way.
When I remove the images the two columns become equally wide and the table fills the whole width. So I'm looking for a solution in how the images are styled; does anyone know if I can add some CSS or HTML attribute to the images to fix this?
Here's the code, stripped of some text styling to keep it legible:
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td valign=top style="background:#f9f2c8;padding:21px 20px 0 20px;vertical-align:top;">
<div style="font-size:13px; ">
<div style="font-size:16px;font-weight:600;">Name of the sender </div>
<div>Description of the role of the sender</div>
</div>
</td>
<td valign=top style="background:#96e7cf;padding:18px 20px 0 16px;vertical-align:top;">
<img src='logo.png' width=124 height=41 alt="Org logo" style="width:124px;height:41px;display:inline;" />
</td>
</tr>
<tr>
<td valign=bottom style="background:#f9f2c8;padding:0 20px 20px 20px;vertical-align:bottom;">
<div><img src='line.png' alt="divider" width=210 height=24 style="width:210px;height:24px;display:inline;" /></div>
<div style="font-size:13px;">06 1234 5678</div>
</td>
<td valign=bottom style="background:#96e7cf;padding:0 20px 20px 20px;vertical-align:bottom;">
<div style="font-size:14px; font-weight:600; white-space:nowrap;">tagline of the org</div>
<div style="font-size:13px;">organisation.nl</div>
</td>
</tr>
<tr>
<td colspan=2 style="padding:20px;">
<p style="font-size:13px;margin:0 0 8px 0; ">Werkzaam op maandag, dinsdag, woensdagmorgen, donderdag en vrijdag</p>
</td>
</tr>
</table>
First, make your table width 100%:
<table border="0" cellspacing="0" cellpadding="0" width="100%">
That will make it fit the full width of its container.
Second, on the text-reduction, this whole table appears to only go down to about 415px. So if your mobile is smaller, it will scale it all as one group. To prevent that, make one or both of your images responsive. Here, I've made the divider responsive:
<div><img src="line.png" alt="divider" width="210" height="24" style="width: 100%;height: auto;display:inline;max-width: 210px!important;"></div>
I've added !important to the max-width because Outlook iOS has a default style that would change it 100% otherwise, potentially bloating your image.
Continue to use the width and height attributes because Outlook Windows desktop uses them.
I am working with some HTML/CSS and VML code to make a button render consistently in most email clients. As outlook doesn't support rounded corners I'm having to add some VML code to achieve this effect. I managed to fix most of the alignment issues but I can't figure out where the spacing at the top/bottom on the button is coming from and how to get rid of it?
I was able to use some VML code from this bulletproof email button generator and Microsoft's reference site
The reason why I'm not using the bulletproof generator is because the people responsible for adding content to emails are not technical and as such I'm trying to minimise issues by exposing them to code as little as possible. Also I understand clicks on VML buttons might not track on some Outlook clients.
Also a similar question can be found here but the solution provided there didn't work in my case or I might have overlooked something?
Below is the code I'm working with. Please note the VML button background colour has been set to green and the table that's meant to be the button is blue. I did this as it was easier for me to troubleshoot.
So far I managed to identify the strange padding around the text itself is coming from the inline css on the a tag but I can't figure our where those random lines of space at the top and bottom of the VML button are coming from.
<!-- button -->
<div align="center" class="float-center" >
<!--[if mso]>
<v:roundrect
xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" arcsize="100%" fillcolor="green" style="width:250px; height:70px;mso-fit-shape-to-text:True;"
<v:stroke color="#1e6db1"/>
<center>
<![endif]-->
<table class="button rounded cta-main float-center" style="Margin:16px 0 16px 0;border-collapse:collapse;border-spacing:0;float:none;margin:16px 0 16px 0;padding:0;text-align:center;vertical-align:top;width:auto">
<tr style="padding:0;text-align:left;vertical-align:top">
<td style="-moz-hyphens:none;-webkit-hyphens:none;Margin:0;border-collapse:collapse!important;color:#1f2935;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:none;line-height:1.5;margin:0;padding:0;text-align:left;vertical-align:top;word-break:break-word;word-wrap:break-word" valign="middle">
<table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:center;vertical-align:top;width:100%" valign="top">
<tr style="padding:0;text-align:left;vertical-align:top;">
<td style="-moz-hyphens:none;-webkit-hyphens:none;Margin:0;background:#1e6db1;border:none;border-collapse:collapse!important;-webkit-border-radius:500px;-moz-border-radius:500px;border-radius:500px;color:#fefefe;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;hyphens:none;line-height:1.5;margin:0;padding:0;text-align:left;vertical-align:top;word-break:break-word;word-wrap:break-word" valign="top">
<a href="https://click.email.ucas.com/?qs=6c9084e0730ba4dc1922768cfa83b05115461a1febe2fb9df4b046be8ebdbf014229f45cf8558f65a28e9fcdb54ced5d6a5fa122aee33ef8" style="Margin:0;border:0 solid #1e6db1;border-radius:50px;color:#fefefe;display:inline-block;padding:24px 32px 24px 32px;font-family:Helvetica,Arial,sans-serif;font-size:18px;font-weight:700;mso-line-height-rule:exactly;line-height:1.5;margin:0;text-align:left;text-decoration:none;">
<span style="color:#fefefe;">
Finance ›
</span>
</a>
</td></tr></table></td></tr></table>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</div>
<!-- end button -->
VML stuff in general adds a lot to your file size unnecessarily.
I use this for my button code and it works on all the major litmus clients:
<table class="button" border="0" cellpadding="0" cellspacing="0" style="background-color:#212121; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; overflow:hidden; mso-padding-alt:0px 21px 0px 21px;">
<tr>
<td width="100%" height="54" align="center" style="font-size:16px; line-height:16px; text-align:center; font-family:'DINPro-Medium',sans-serif; color:#FFFFFF;">
<a href="http://buttonLink.com" target="_blank" style="color:#FFFFFF; text-decoration:none; width:100%; display:block; padding-top:16px; padding-bottom:16px;"> <span style="display:inline-block; padding-top:0px; padding-right:21px; padding-bottom:0px; padding-left:21px; color:#FFFFFF;">
SHOP NOW
</span></a>
</td>
</tr>
</table>
Litmus also has this super helpful article on buttons:
https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design
I have a cfdocument being created. I have a a footer to it as below
<cfdocumentitem type="footer" >
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="##FF6F00" >
<td align="right" style="font-size:10px">
<font color="##FFFFFF"> © AT&T Intellectual Property. All rights reserved.<br>AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.</font>
</td>
</table>
</cfdocumentitem>
Im not able to get the orange body stretch out to the whole page, meaning the orange portion is being displayed as above. also the font size is not being rendered which I have specified. here is my style . Any ideas on what is wrong here?
.test{
color:#FFFFFF;
font-family:verdana;
font-size:4px
}
.testone{align-content:stretch}
Try the following changes:
Set the left, right and top margins in your <cfdocument> tag to 0 and the bottom margin to the height of your footer
Make sure the main part of your document has a <body> tag
Add a <style> tag above the <body> tag and specify the main body margins, e.g. 2cm
Now wrap your footer table in a <body> tag
Add a <style> tag above this body tag within the footer
Set the body margin and padding to 0
Set the table height to your cfdocument marginBottom value
Here's what your code should now look like (Note, I've specified cm as my unit):
<cfdocument format="pdf" marginBottom="1" marginLeft="0" marginRight="0" marginTop="0" unit="cm">
<style type="text/css">
body{ margin:2cm; }
</style>
<body>
<p>Page content</p>
</body>
<cfdocumentitem type="footer">
<style type="text/css">
body{ margin:0; padding:0; }
table{ height:1cm; };
</style>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FF6F00" >
<td align="right" style="font-size:10px">
<font color="#FFFFFF">
© AT&T Intellectual Property. All rights reserved.
<br>AT&T and the AT&T logo are trademarks of AT&T Intellectual Property.
</font>
</td>
</table>
</body>
</cfdocumentitem>
</cfdocument>
To style a class you need to put a . before the atribute.
.test{
color:#FFFFFF;
font-family:verdana;
font-size:4px;
}
.testone{align-content:stretch;}
Also make sure cfdocumentitem and body is 100% width.
I'm trying to get three images on a single line, one left-justified, one centred and the last one right-justified. I've settled on using a single row table to do it, but am having a hard time getting the images to be centred within their respective cells.
Is there a better way of doing it than I've chosen? I'm not going to use the <td align="center"> attribute as it's been deprecated in HTML5, so am looking for a way to do it using CSS. This is what I have at the moment (I've set the table border attribute to '1' so I can see how the image alignment within the cell renders):
<style>
.centre_image
{
float:center;
}
</style>
<body>
<table border="1">
<tr>
<td class="centre_image">
<object type="image/svg+xml" data="images/lawfirms.svg">
<img src="images/lawfirms.png" alt=""/>
</object>
</td>
<td class="centre_image">
<object type="image/svg+xml" data="images/industry.svg">
<img src="images/industry.png" alt=""/>
</object>
</td>
<td class="centre_image">
<object type="image/svg+xml" data="images/in-house.svg">
<img src="images/in-house.png" alt=""/>
</object>
</td>
</tr>
</table>
This gives the following result in Firefox 19.0 on Ubuntu:
and the following result in Chrome 25.0:
EDIT - here is the full HTML after making the changes referred to in j08691's answer:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<title>SVG Included with <object> tag</title>
<style>
.centre_image
{
text-align:center;
}
</style>
</head>
<body>
<table border="1" style="width:100%">
<tr>
<td class="centre_image">
<object type="image/svg+xml" data="images/lawfirms.svg">
<img src="images/lawfirms.png" alt=""/>
</object>
</td>
<td class="centre_image">
<object type="image/svg+xml" data="images/industry.svg">
<img src="images/industry.png" alt=""/>
</object>
</td>
<td class="centre_image">
<object type="image/svg+xml" data="images/in-house.svg">
<img src="images/in-house.png" alt=""/>
</object>
</td>
</tr>
</table>
</body>
</html>
Here is the result of Naresh Kumar's answer:
As there is no float:center property, have you tried text-align:center?
.centre_image {
text-align:center;
}
jsFiddle example
try something like :
.centre_image{
text-align:center;
margin-left:auto;
margin-right:auto;
}
i hope that this will help you.
In HTML5 vAlign is deprecated. Here is a tips put all three images in side li tag. And in CSS assign a property display: inline block for the li tag.
There were many ways to not make it right. Especially the 'float:center'.
I fiddled an example here
and another fiddle with basic .css reset here
Since you want to center horizontaly in a TD tag, you can simply align it ..
<td align="center">
But you will be noticed that 'align' property is 'deprecated' and you will be suggested to use CSS instead. For this, others already showed you the answer
.centre_image {
text-align:center;
vertical-align:middle;
}
This CSS will work for as long has your element is not 'floated'
p.s. 'DEPRECATED' is not evil.
p.s. w3school has a not so good reputation on StackOverflow.
My table cells have a font-size of 9pt. Within these table cells there is either a spacer image or text. If it's a spacer image I just want the height of the table, the height of the spacer image (2px in this case). Code below:
<table width="100%" cellspacing="0" cellpadding="2" border="0" class="foo">
<tbody>
<tr valign="top">
<td width="100%" colspan="4" class="foo">
<img width="0" height="1" alt="" src="spacer.gif">
</td>
</tr>
</tbody>
</table>
<table width="100%" cellspacing="0" cellpadding="2" border="0" class="foo">
<tbody>
<tr valign="top">
<td width="100%" colspan="4" class="foo">
bar <span>barbar</span>
</td>
</tr>
</tbody>
</table>
As of right now, whether it's text or a spacer image the height of the cell is 9pt. And if this wasn't bad enough, I CANNOT change the markup. What you see is what I get.
OK, cpara :)
This is not best practice, but if you really cannot change your HTML, you could still use a stylesheet. If the styles in the stylesheet do not overwrite the HTML styles, you can also try to add !important (like width:100% !important;) to any style in your stylesheet...
Well, if the 9pt font-size is not set anywhere but the text is rendered to 9pt, it can be that you do use a separate stylesheet and the 9pt are set in either the div or the body, or your browser's standard font-size (if not font-size is set) is set to 9pt...
But great, if the answer was finally closer than thought and it works now for you :)