I have made a button for a newsletter using http://buttons.cm/
Although it is supposed to display properly on Outlook, the text is not vertically centered but instead is aligned slightly to the bottom.
Button's original code:
<td align="center" width="70%">
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:50px;v-text-anchor:middle;width:200px;" arcsize="52%" stroke="f" fillcolor="#0072b9">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://"
style="background-color:#0072b9;border-radius:26px;color:#ffffff;display:inline-block;font-family:Verdana,sans-serif;font-size:20px;font-weight:normal;line-height:50px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">Leer más</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
</td>
How it's supposed to look (and how is looking on Mail, for example):
How it's looking on Outlook:
I have tried changing the height and line-height values to ems or % instead of pixels, adding the mso-line-height-rule:exactly property, adding the line-height to the td instead of to the a tag... no luck!
This is the closest I can get it through VML in email to make Outlook listen. It is not perfectly vertical center, but is close.
I changed the VML to include the text and link of the button inside the roundrect tag inside the VML instead of using the a tag for both. This allows better compatability with Outlook because it is utilizing VML (a microsoft language) instead of HTML that would require Word to rewrite/translate it. This combined with a couple small tweaks (e.g. set a defined width) produced the closest to vertical align I could get. VML offers many stylings and other options, but not all translate into Email/Outlook, so keep this in mind if you research into VML.
:
<td align="center" width="70%">
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://" style="height:50px;v-text-anchor:middle;width:200px;" arcsize="52%" stroke="f" fill="t">
<v:fill type="tile" color="#0072b9" />
<w:anchorlock/>
<center style="text-align:center; color:#FFFFFF; font-family: Verdana,sans-serif; font-size:20px; font-weight:normal;">Leer más</center>
</v:roundrect>
<![endif]-->
<a href="http://"
style="background-color:#0072b9;border-radius:26px;color:#ffffff;display:inline-block;font-family:Verdana,sans-serif;font-size:20px;font-weight:normal;line-height:50px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none; mso-hide:all;">Leer más</a>
</div>
</td>
According to W3Schools the align attribute defines the horizontal and not vertrical alignment of content in a cell.
W3Schools specifies that the vertical alignment of the content in a cell can be defined using the valign attribute
<td align="center" valign="middle" width="70%">
Alternatively you can use the vertical-align css attribute defined as an inline style to vertically center an element in its parent container.
You may need to use one or the other or both of the above methods depending on the mail client(s) you are targeting. It pays to check which mail clients support which elements, there are plenty of references online, heres one, you may be able to find better.
mso-text-raise style will help you to achieve proper vertical align
Related
I'm currently building a new HTML-template.
In one section I want to display a different image size for MS-Outlook, as it doesn't react in the same way as other clients.
Original:
<td align="left" class="column_one_half column_image" valign="top" width="100%">
<img alt="" class="mso-size" src="https://xxx" width="100%">
</td>
I need to show the image with the size width="270";height="190" in Outlook. I would like to use a CSS-declaration in the head.
I was trying the approach below, however it doesn't work. Litmus is showing no change. What am I doing wrong?
Thanks and best,
This is what I tried:
The following structure works well, Litmus shows the expected result:
<!--[if mso]>
<td align="left" class="column_one_half column_image" valign="top" width="100%">
<img alt="" src="xxx" width="270" height="190">
</td>
<div style="display:none">
<![endif]-->
<td align="left" class="column_one_half column_image" valign="top" width="100%">
<img alt="" src="xxx" width="100%">
</td>
<!--[if mso]>
<div>
<![endif]-->
But, I don't want everyone to be forced to paste in the image-URL twice. I would like to use the CSS in the head instead.
I tried the following declaration (pasted it under the first -section:
<!--[if mso]>
<style>
img.mso-size {
width:270px!important;
height:190px!important;
}
</style>
<![endif]-->
Unfortunately, Outlook on Windows use Word as a rendering engine. While they do support width and height in CSS, they do not for <img> elements. The only way to size an image is to use the HTML width attribute or VML as you showed.
Usually, what I do is declare the width I want in Outlook in the HTML attribute. And then in an inline style on the same image, apply styles I want for other clients. Based on your example, that could give:
<img alt="" src="https://example.com" width="270" style="width:100%; max-width:270px;" />
Note that percentage values in the width attribute are also buggy in The Outlooks on Windows. (They’ll be based on the physical file size and not on the parent’s element size as you’d normally expect.) For more details on CSS support in email clients, you can refer to Can I email.
I have been trying to create a let's call it a badge component for the email design. It looks like this: . It renders perfectly for all email clients except Microsoft Outlook because of its rounded corners. I do know that MSO does not support border-radius so I tried using VML that is as follows:
<span>
{`<!--[if mso]>
<v:roundrect
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:w="urn:schemas-microsoft-com:office:word"
style="v-text-anchor:middle;height:20px;width:55px;"
arcsize="50%"
stroke="f"
fillcolor="#EEEEEE">
<w:anchorlock/>
<center style="font-family:Arial,sans-serif;font-size:12px;font-weight:normal;line-height:20px;">`}
{props.text}
{`</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->`}
<span className={`badge-${props.type}`} style={{ ...BADGE_STYLES, backgroundColor: bgColor }}>
{props.text}
</span>
{'<!-- <![endif]-->'}
</span>
Now I can see the component with rounded corners but without text like this:
The width and height are fixed. If I increase the height I can see that the text is there e.g. but with the required height it is not there like the overflow is hidden. How can I achieve the desired design for the component in MSO or what am I missing? I'll really appreciate the help. Thank you.
MS Outlook appears to require a minimum padding in its rendering of the 'roundrect'.
As such it may be a bit bigger than other badges.
But, you can improve this. You have a line-height of 20px but the font-size is 12px. It's only one line, so this produces a gap. Remove it.
Second, you can wrap the <center> text in mso with a textbox and style mso-fit-shape-to-text:true (HT: https://stackoverflow.com/a/48178955/8942566), so it doesn't get clipped, like my test sample:
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="mso-wrap-style:none; mso-position-horizontal: center;height:20px;" arcsize="50%" stroke="f" fillcolor="#333333">
<v:textbox style="mso-fit-shape-to-text:true">
<center style="font-family:Arial,sans-serif;font-size:12px;font-weight:normal;color:#eeeeee">badge</center>
</v:textbox>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<span style="font-family:Arial,sans-serif;font-size:12px;font-weight:normal;line-height:12px;border-radius:50px;background-color:#333333;color:#eeeeee;padding:3px 4px">
badge
</span>
<!-- <![endif]-->
mso-position-horizontal: center; is a way of centering the text within the shape.
I am working on an outlook email template, I am trying to render this piece of code, especially for outlook Windows app
<div style="width:100%;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{QUEST_URL}}" style="height:36px;v-text-anchor:middle;width:100%;" arcsize="5%" strokecolor="#01AAA3" fillcolor="#01AAA3">
<w:anchorlock/>
<center style="color:#ffffff;font-family: Manrope, Tahoma;font-size:14px; font-weight: 800;line-height:30px; ">START QUEST</center>
</v:roundrect>
<![endif]-->
START QUEST
</div>
But the anchor's width is not being rendered 100%. Text is also not showing.
It's rendering like:
I want it to be rendered like:
So, please need help in that regard.
Try with setting the parent div's width to 100vw so that it'll take the whole width, then give the 100% width to the anchor tag.
<div style="width:100vw;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{QUEST_URL}}" style="height:36px;v-text-anchor:middle;width:100%;" arcsize="5%" strokecolor="#01AAA3" fillcolor="#01AAA3">
<w:anchorlock/>
<center style="color:#ffffff;font-family: Manrope, Tahoma;font-size:14px; font-weight: 800;line-height:30px; ">START QUEST</center>
</v:roundrect>
<![endif]-->
START QUEST
</div>
Outlook desktop for Windows is rendered as if for print. Since you already have VML, you can safely make the width and height fixed pixels without affecting other email clients.
So change the VML width and height to what you want, e.g.:
height:36px;v-text-anchor:middle;width:600px;
I tried to make a background image cover in many different ways but Mailchimp seems to delete that piece of code.
Any approach on how to make this work.
Cheers,
Michael
Ah Mailchimp. Well, in custom templates the best thing to do is literally DO IT ALL. Meaning, add it to the table or TD with CSS AND the default table styling.
Also you have to take into account the Outlook users that your email will go to.
SO you have to add a few things.
Let's start with the html tag above the head. First off, the best doctype to use is XHTML 1.0 transitional. Now I know that you CAN do one with an empty html tag and NO DOCTYPE, but you aren't doing yourself any favors.
Change <html> to <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
This is going to say "You are using Microsoft. Okay, where are those rules?"
Next off, in the CSS you need to add this:
#outlook a{
padding:0;
}
.ReadMsgBody{
width:100%;
}
body{
width:100% !important;
min-width:100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}
.ExternalClass{
width:100%;
}
v*{
behavior:url(#default#VML);
display:inline-block;
}
Pay attention to the ones like v* and #outlook a.
SO you have those, and now you can add in the stuff for the background. In EACH table or td that you want a background, you have to add it inline. BUT it is a good practice to ALSO use an xlmns wrapper. This doesn't have to be code, it can be commented out and will still be read as a backup.
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="YOURIMAGEPATH.jpg" color="#000000"/>
</v:background>
<![endif]-->
<table cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#000000" background="YOURIMAGEPATH.jpg" style="background-image:url(YOURIMAGEPATH.jpg)">
<tr>
<td align="center">
<!--YOUR CONTENT-->
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
Notice how the entire table is wrapped in that commented section? That says that basically if your recipient is using Outlook, it is going to go ahead and render the background.
Campaign Monitor made a really nifty too to do just this to table and td. Remember too that you can NOT use cover or skew the background at all. Just make it the 100% size your email will be.
<!--Hopefully not more than 600px-->
Backgrounds.cm by Campaign Monitor
I want to set the image size to 100% inside of td.
<table style="width:100%; max-width:960px; margin:auto;">
<tr style="width:100%;">
<td background="http://source/bg.png">
<img src="http://source/logo.png" style="margin-left:35%;" />
<h1 style="text-align:center;"> Some text on top of bg-image inside a td</h1>
</td>
</tr>
</table>
So I have a big td with bg-image and a logo on top of it with some text.I am doing css all in-line to be able to send html email.
The problem is that the image has it's natural size, and doesn't resize to 100% to fit the td size.
Firstly, emails are a pain when it comes to CSS / HTML Standards... Google will help you here.. In general.. Your best testing this with outlook/hotmail/gmail.. Outlook is one of the worse for supporting HTML Emails.
As for the code, have a look at this example instead: http://jsfiddle.net/82bd2fyh/
<table style="width:100%; max-width:960px; margin:auto;">
<tr style="width:100%;">
<td style="background-size:100% 100%; background-image:url('http://placehold.it/550x550');">
<img src="http://placehold.it/100/09f/fff.png" style="margin-left:35%;" />
<h1 style="text-align:center;"> Some text on top of bg-image inside a td</h1>
</td>
</tr>
</table>
Please note though, background-size is only supported in CSS3, IE9+..
Otherwise another option is to use a normal image tag and stretch that to 100% then position with a z-index your content / a div over top of it.
Email Support Guide Line: https://www.campaignmonitor.com/css/
The above is also under the assumption you are talking about the background image and not the logo / img tag.
If you mean your img tag, then simply apply a style to it.. But do believe you mean your TD background image
Building on Mayem's answer, which is 100% right in almost all email clients, I wanted to add a bit more to it. This will not work in Outlook at all and has potential for issues with Gmail app.
1.) Outlook almost always forces actual size of the image, regardless of CSS or HTML resizing (size is also based on the PPI setting on your computer) so it is always best to size your images to fit what you want them to display at in Outlook and then control size for all other clients.
2.) Outlook does not support background image, so you will need to use VML to mimic this for outook - best place for that is http://backgrounds.cm/. It will do most of the work for you.
3.) Gmail does not read stylesheets, so the code will likely lead to a deformed version when displayed on gmail app - this is something you will need to work on from a design/layout perspective
4.) Margin-left and most of the code on the overlay content needs work for email HTML as it is not supported on many email clients.
See below code that is built from Mayhem's answer with some tweaks and the Outlook conditional VML added in.
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%; max-width:960px; margin:0 auto;">
<tr>
<td background="http://placehold.it/960x550" width="960" height="550" style="background-size:auto 100%; background-image:url('http://placehold.it/960x550');">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:960px;height:550px;">
<v:fill type="tile" src="http://placehold.it/960x550" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<img src="http://placehold.it/100/09f/fff.png" style="margin-left:35%;" />
<h1 style="text-align:center;"> Some text on top of bg-image inside a td</h1>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td> </tr>
</table>
simply change
<img src="http://source/logo.png" style="margin-left:35%;" />
to
<img src="http://source/logo.png" style="width:100%;margin-left:35%;" />
A more correct solution is to change
<img src="http://placehold.it/100/09f/fff.png" style="margin-left:35%;" />
to
<img src="http://placehold.it/100/09f/fff.png" style="width:65%;margin-left:35%;" />