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
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.
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
I am working on an HTML email and having some css style issues in Outlook 2007, 2010, 2013.
I have two images in a td cell and 1 of them i want a vertical border divider to separate them. I placed a border right on the first (left image) and it works in all clients/browsers by Outlook 2007, 2010, 2013.
Here is the code i am using:
<tr>
<td bgcolor="#673695" style="color:#ffffff;padding:14px 0 14px 14px;text-align:left;border-collapse: collapse;">
<img src="lowreslogo.png" border="0" width="130" style="border-right:1px solid #a377cd;padding-right:20px;" align="left">
<img src="email_logo.png" border="0" width="150" align="left" style="padding-top:7px;">
</td>
</tr>
I have run this through litmus.com and need some help with these couple of clients that are left. I cant modify the two images to have a border built in just as a side note...
Outlook 2007 does not support CSS border on <img> elements - see the report from the Email Standards Project for Outlook 2007. There is a more detailed example from the same site here.
So it seems that the Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 documentation is incorrect as it states that the <img> element does support border-right.
I suggest wrapping the first image in a <span> and styling that instead. Sorry I can't test as I don't have Outlook.
You are also declaring border=0 in html on the same image. Not sure if that is overriding your css declaration in this case.
You could try setting that to 1 (or removing it altogether). If you set it to 1, you'd have to set the color on the 3 other border sides to match the background so they are effectively invisible.
I think you can wrap those 2 images in a table like below. Some extra code but will fix rendering issue.
<tr>
<td bgcolor="#673695" style="color:#ffffff;padding:14px 0 14px 14px;text-align:left;border-collapse: collapse;">
<table border="0" cellpadding="0" cellspacing="0" width="300" style="color:#ffffff">
<tr>
<td width="130"><img src="lowreslogo.png" border="0" width="130" alt="" style="display: block;" /></td>
<td width="19"></td>
<td width="1" bgcolor="#a377cd"><td>
<td width="150" style="padding-top:7px;"><img src="email_logo.png" border="0" width="150" alt="" style="display: block;" /></td>
</tr>
</table>
</td>
</tr>
I have a site that generates related video's to a topic. I have 4 thumbnails and I want to add a css play button on the thumbnails, which can be done with this code: ► | It will be like this: http://i47.tinypic.com/250qis9.png
Here is a demo: http://jsfiddle.net/vtPhZ/2/
The problem is that it won't recognize the a:before tags that I gave it to. What am I doing wrong?
The HTML snippet which generates the list:
<div id="youtubeThumbs">
<ul class="ytlist">
<li>
<table cellspacing="3" cellpadding="3" border="0">
<tbody>
<tr>
<td valign="top" rowspan="2">
<a class="clip" style="cursor: pointer;">
<span>
<img src="http://i.ytimg.com/vi/1q47bOtV3-Y/hqdefault.jpg">
<em></em>
</span>
</a>
</td>
<td valign="top">
</tr>
</tbody>
</table>
</li>
And the CSS I tried to use (without success):
.ytlist li > a:before {
content: "►";
}
How can I make it work?
I can't explain why but for some reason your change of methods for declaring a child element is causing the problem. Using my first two recommendations of using the unicode entity for the content and using the pseudo element rather than the pseudo class, the CSS should work. However, it did not initially work. When I removed > from the first line the CSS worked.
Here's a demo: http://jsfiddle.net/vtPhZ/4/
Your method was strange but the fact that it didn't work was even more strange...
I have a hyperlink that contains an image, nothing special - like this .
I want to align the text to the right of the image as per attachment1, but the result is as per attachment2. I need to also block the hyperlink so that it fills the rectangle (its width and height)
Anyone know how to acheive this?
Bunch of ways to do this:
Using <div>'s
<div style="width: 200px;">
<div style="float: left; width: 70px;">
<img src="http://a0.twimg.com/profile_images/749158551/Ry_reasonably_small.jpg" width="64" height="64" />
</div>
<div style="float: right; width: 130px;">
<p><strong>This is a really really over sized title for a link to neverland</strong></p><p>Some other text</p>
</div>
<div style="clear: both;">
</div>
Using a <table>
<table width="200">
<tr>
<td rowspan="2"><img src="http://a0.twimg.com/profile_images/749158551/Ry_reasonably_small.jpg" width="64" height="64" /></td>
<td><strong>This is a really really over sized title for a link to neverland</strong></td>
</tr>
<tr>
<td>Some other text</td>
</tr>
</table>
put this on your page, see what is happening. Cheers
<div style="width:500px;height:250px; padding:10px; padding-left:250px; border:solid 1px black; background-repeat:no-repeat; background-position:left center; background-image:url('https://lh4.googleusercontent.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAlUA/EHduo3GhTDs/s250-c-k/photo.jpg')">
Google – 52 minutes ago – September 8 marks the anniversary of Star Trek's first broadcast, and naturally ... Amit Singhal originally shared this post: OK, I admit it, I am a die-hard Trekkie. I grew up watching endless ...
Google – 18 hours ago – By now, you may know that when you search for [define] followed by a word, Google will show you the definition. But did you know that there's a Dictionary mode ...
</div>
Similar to #njk, but using the a as the block element.
http://jsfiddle.net/scrimothy/r6TKz/