Finding a strange behavior only in outlook.com with a button text alignment for an email build. For some reason it's aligned to the top of the button instead of being in the middle. Unable to figure out why this is. Any insights appreciated.
Thank you for your time and thoughts.
Code snippet and CTA image link below.
<table cellpadding="0" cellspacing="0" border="0" >
<tr>
<td style="padding: 0px 0px 0px 0px; background-color:#989b98; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#e4008f; cursor: pointer; display: block; min-height: 45px; vertical-align: middle; min-width: 220px;" align="center" valign="middle">16pxXXXX XXXXX XXXXX</td>
</tr>
</table>
I would first start off by reviewing this asset for anything "email" related in order to get an understanding of how different email clients react with CSS.
You will notice how display is not supported in Outlook which would result in your anchor tag not being able to use padding. I would recommend coding an email button the following way:
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td align="center" valign="middle" bgcolor="#989b98" style="padding: 12px 20px; font-family: 'Arial', Helvetica, sans-serif; font-size: 16px; font-weight: bold;">
16pxXXXX XXXXX XXXXX
</td>
</tr>
</tbody>
</table>
This unfortunately only makes the text clickable and not the entire button, but it's going to be your best option in order to make it consistent across all other email clients without having to create an image.
Related
I am facing a weird problem with Roboto Italic Font, it is not working when the Newsletters are opened up in Gmail.
I am sharing the screenshot below to better understand the issue:
In the above screenshot, you can see the font is not working for Italic Text. I set font-weight:500 for whole Headline, but it doesn't work for Italicized content.
here is the HTML:
<table role="presentation" class="wrap" width="570" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left" class="hl-2">3. The month <i>October</i> is the best time to visit Jaipur.</td>
</tr>
</table>
here is the Css:
#import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,400;0,500;0,700;1,400;1,500;1,700&family=Rubik:ital,wght#0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
.hl-2 {
font-size: 18px;
line-height: 22px;
color: #34444c;
font-weight: 500;
font-family: Rubik, Roboto, sans-serif;
}
Any idea how to handle this situation? Your help would be really appreciated.
Thanks!
I created an hr line but when I view it on other browsers, the color I set for it doesn't retain and it defaults to a grey color. Is there another code I could use to create a line? I also need to create two lines to be stacked on top of each other. Thanks!
Here's the code!
<tr>
<td><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding: 30px 0 0; font-family: Century gothic; font-weight: bold; text-align: center; mso-height-rule: exactly; color: #4F2C1D"><span style="font-size: 40px;">FIRSTNAME LASTNAME</span><br><span style="font-size: 20px; color: #4F2C1D">(415) 333-3333<br>john.doe#gmail.com</span>
<br><br><hr width="60%" size="8" align="center" color="B7DD79"><br>
</td>
</tr>
</table></td>
</tr>
<hr> layout attributes are removed in HTML5, possibly the browser it's "working" on allows you to use the outdated version. Try using a CSS file to style it instead.
source
It's hard to answer with no code provided.
Firstly try adding
hr {
clear: both;
}
to the css to clear floating elements.
Secondly you could always make an empty div with a border bottom which should work?
I've been attempting to format an email template to work cross-client. I've tried different frameworks and I've read about compatibility issues, especially with Outlook. Although I've been able to format the template to display pretty well in Outlook, I'm still having an issue where there are large spaces between words. It does not happen in every paragraph and it seems to only happen with one or two words at a time. I've taken this screenshot for reference. Notice the disclaimer text under the 'Chocolate World' section.
Here is the code for that section, all styles are inline. Is there a compatibility issue with any of the inline styles that might be causing this issue?
<table align="left" cellpadding="0" cellspacing="0" class="deviceWidth" style="width: 33%;">
<tbody>
<tr>
<td style="padding: 0 10px 20px 10px;" align="center" valign="top">
<p style="mso-table-lspace: 0; mso-table-rspace: 0; margin: 0;"><img align="left" alt="" border="0" class="deviceWidth" src="http://www.ctsciencecenter.org/cm_mailer/impact/chocolate-world-expo_impaCT.jpg" style=" width: 128px;padding:0px 0px 0px 10px;" width="128" /></p>
</td>
</tr>
<tr>
<td style="padding: 0 10px 20px 10px;"><a style="text-decoration: none; font-size: 16px; color: #333; font-weight: bold; font-family: Arial, sans-serif;" href="#">Chocolate World Expo</a>
<p style="color: #333; text-align: left; font-size: 12px; line-height: 24px;"><strong>April 27, 10AM–7PM<br />
Special Member Pricing:<br />
$15 Adults, $10 Youth<br />
Coupon Code: Bonbon</strong></p>
<p style="color: #333; text-align: left; font-size: 12px; line-height: 24px;">Sample chocolate offerings, baked goods, cheeses and gelato that will perk up your taste buds. Enjoy a different treat with every step. All of these delicious items will be available for purchase! Visit Chocolate World Expo on the web to find what you fancy.<br /><br /><strong style="font-size:11px;">Please note that we will be CLOSED to the public on April 27. Purchasing tickets in advance is highly recommended.</strong></p>
<table align="left" style="width: 90px;">
<tbody>
<tr>
<td style="padding: 10px 16px; background-color: #666; border-top: 1px solid #eee; background-repeat: repeat-x;" align="center" bgcolor="#666"><a style="color: #FFF; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; font-family: Arial, sans-serif; -webkit-text-size-adjust: none;">Tickets » </a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Thank you for your help!
I'm not sure where your CSS is that is causing the text to justify (do you have it in your head <style>?), but it looks as though you are trying to prevent it happening locally as you are using text-align:left;.
text-align doesn't always work - in html email, you should instead use align="left" in your <td> element. This will affect all within it.
Example:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
This text will align left
</td>
</tr>
</table>
Full text justification in narrow block of HTML is never going to look good. This has nothing to do with your styling, but rather the limitations of the text justification algorithm.
Since it cannot break-words and use hyphens to wrap (as you'll see in properly typeset magazines and books) you often end up with this exact problem. It's best to avoid full-justification unless you have much wider columns.
You could try using a soft hyphen:
or
Words which are to long to fit in a column, are broken in to two using a dash.
This dash can be placed in every part of the sentence and will only show, if the word breaks at that soft hyphen.
Se this example:
averylongwordwillbreakwhenasofthyphenisaddedattherightspotandaddsadashtobreakthewordatthenextrowwithoutaddingtoomuchdashes
averylongwordwillbreakwhenasofthyphenisaddedattherightspotandaddsadashtobreakthewordatthenextrowwithoutaddingtoomuchdashes
Did you try add a align left and vertical align top to the td and set the width and height?
Replace all the td for
<td align="left" valign="top" width="value-image" height="value-image" > </td>
Also, you must to set up a display: block for any image
<img style="display:block;" height="value-image" width="value-image">
I hope to be helpful
This is the issue I'm having right now. There are these margins along the left and right sides of my HTML email as seen here in Mac mail (also visible in Gmail and Thunderbird): http://cl.ly/image/3j133f393Y3M/Screen%20Shot%202013-06-26%20at%201.22.04%20AM.png
What I'm aiming for is a full-width background like this: http://cl.ly/image/1205093I1m34/Screen%20Shot%202013-06-26%20at%201.22.47%20AM.png
My background's width already seems to be set to 100% according to the code:
<html>
<title>AASU VCU</title>
<body style="margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; font-family: Helvetica, Arial, san-serif; background-color:#fff" bgcolor="#000">
</body>
<table bgcolor="#b2151b" style="color:#fff;font-family:Helvetica,Arial,sans-serif;font-size:16px;line-height:26px;width:100%;margin:0;padding:0">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#b2151b" style="padding:0 40px; color:#fff"; font-family="Helvetica,Arial,san-serif"; font-size:"16px"; line-height="25px"; table-layout="fixed">
<tbody>
<tr>
<td bgcolor="#b2151b" width="450" style="color:#fff;font-family:Helvetica,Arial,sans-serif;font-size:16px;line-height:26px">
<br>
<br>
<table cellpadding="0" cellspacing="0" width="450" bgcolor="#b2151b" border="0" rules="none" frame="border" align="center" style="color:#fff; font-family:Helvetica,Arial,sans-serif; font-size:16px;line-height:26px; border-width:0px 0px 0px 0px; background-color:#b2151b" >
<tbody>
<tr>
<td width="450" valign="top" bgcolor="#b2151b" style="color:#a7abb1;font-family:Helvetica,Arial,sans-serif;font-size:16px;line-height:26px">
<a style="border:none!important;color:#ffffff;text-decoration:none;border-bottom:1px solid #666"><img src="http://f.cl.ly/items/3M3W1U0W1o1P1s3u1Q0C/White_transparent.png" alt="AASU VCU" style="border:none"></a>
</td>
</tr>
</tbody>
</table>
I tested the code in a browser and the background appears to succeed in stretching to the full width no matter how much or less I resize it. It's only in the mail client(s) that I see these margins. What am I missing?
I would suggest including "border:0px" attribute in the first table element. My rule of thumb is that I set margin, padding and border to 0px when I have no set value for them.
Good luck.
Also, your </body> closing tag is right under the <body> tag. That might be an issue too.
I've been working on making a signature (CSS+HTML) work across multiple platforms, and have hit the wall when it comes to Hotmail.
For some reason, when sending this signature to my Hotmail address, it gets stretched vertically. It seems that Hotmail, for one reason or another, is adding a lot of white space below the text in each table cell?
The problem is clearly illustrated in this graphic: http://www.madculture.es/images/test.jpg
The first signature there, is the intended output. I added borders on #2, to better highlight the problem. Signature three is how it looks when received in Hotmail! :(
This signature works fine in Outlook 2003-2013, Gmail, Lotus Notes, but not in Hotmail.
Does anyone know what could be the reason? I'm clueless, having experimented with this for days now.
Here's the full code for the signature:
<div>
<table border="1" cellspacing="0" cellpadding="1" height="50" style="font-family: Verdana, Arial, sans-serif; font-size: 1em;">
<tr>
<td rowspan="4">
<img src="mc2.png" nosend="1" width="170" height="86" />
</td>
<td style="padding-top: 2px;">
John D. Doe
</td>
</tr>
<tr>
<td style="font-size: 0.85em; font-weight: bold; color: #932D1F; padding-bottom: 2px;">
Marketing & analytics
</td>
</tr>
<tr>
<td style="display: block;">
johnd#doe.com
</td>
</tr>
<tr>
<td style="font-size: 1.05em; font-weight: bold; color: #444; padding-top: 1px;">
Madrid
</td>
</tr>
</table>
</div>
I hope someone can help...
Try slowly removing elements and re-testing at every stage. As a start:
Your table has a height set that's less than your main image
Use nested tables, not rowspan for better email client support
Avoid padding and use set heights instead
Don't set your td to display: block
Add font styling directly to td s (not the table) to get Outlook working correctly