Sample Code:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
</head>
<body style="font-family: Arial; margin: 0; padding: 0;">
<table align="center" width="600" cellpadding="0" cellspacing="0" border="0" style="width: 600px; background-color: #000000; font-family: Arial; font-size: 15px;color: #ff0000;">
<tr>
<td style="padding:10px;font-weight: bold;font-size: 20px; color: #ff0000;">Header Title</td>
</tr>
<tr>
<td style="padding:10px;">Here is the content for this section.</td>
</tr>
<tr>
<td style="padding:10px">
<img src="LearnMore.png" width="170" height="38" border="0" alt="Learn More" />
</td>
</tr>
</table>
</body>
</html>
Output for Office 365 in windows 10
All other clients seem to be fine.
Attempted the fixes from here
Looks like if a font size of 12px or 16px doesn't show the line but the requirement is to use 15px
expected result
The problem is often due to a rounding error in the Outlook engine (MS Word) with odd numbers. In your case, you've already identified an even numbered font-size works. Seeing as that's the core error, and it's not a bug in your code, you have to weigh up whether the unsightliness of the line is worse than changing the size of the font.
If that's not acceptable, you may have luck by setting a line-height of 16px like so: font-size:15px; line-height:16px;.
If all else fails, you can set the font-size differently just for Outlook desktops: font-size:15px; mso-ansi-font-size: 16px;
Related
I have created a newsletter which displays the email address in the wrong color in Outlook. In the web version the email address is displayed in white without problems and in Outlook it is displayed in blue.
This is the part of the code:
<div class="column" style="width:100%;max-width:320px;display:inline-block;vertical-align:top;">
<table border="0" cellpadding="0" cellspacing="0" style="border-spacing:0;font-family: roboto, Arial, sans-serif;color:#ffffff;background-color:#393939;" width="100%">
<tbody>
<tr>
<td class="inner" style="padding-top: 5px; padding-bottom: 5px; padding-right: 20px; padding-left: 20px; font-size:0">
<table border="0" cellpadding="0" cellspacing="0" class="contents" style="border-spacing:0;font-family: roboto, Arial, sans-serif;color:#ffffff !important;width:100%;font-size:11px;text-align:left;text-decoration: none;">
<tbody>
<tr>
<td color="color: #ffffff" style="padding:0; color: #ffffff !important">Ipsum Lorem:<br />
<div style="color: #ffffff; font-family: roboto, Arial, sans-serif;">{$EMAIL}</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
Does anyone know how to change this?
Thanks in advance
The background property is not supported in Word (only when there is a URL). The fact is that Outlook uses Word for rendering HTML bodies. You can read more about supported and unsupported HTML elements and CSS properties in the following articles:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
I've tried to Frankenstein together an e-mail signature but I'm failing.
I opened the e-mail on iPhone, Mac Mail, Thunderbird and Gmail and they all look different. Some drop the social icons below the main logo, others drop the gray text.
Fiddle (looking correct): https://i.imgur.com/OmjAliW.png
Thundermail: https://i.imgur.com/gk0eL3y.jpg
Gmail: https://i.imgur.com/DVZYdxF.png
Mac mail: https://i.imgur.com/jPS89ou.png
iPhone: https://i.imgur.com/ZZob4Ie.png
Here's the current code:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Montserrat', sans-serif;
font-size: 12px;
font-weight: 300;
color: black;
}
td {
display: table-cell;
}
table {
table-layout: fixed;
height: 81px;
width: 250px;
overflow-y: hidden;
display: block;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="2" style="width:45px;vertical-align:top"><img style="border:none" width="45" src="https://i.imgur.com/qFFfOdW.png">
</td>
<td style="height:45px;vertical-align:top;padding-top:7px;padding-left:15px"><b><span style="color:#000000;font-size:12px;">NAME HERE</span></b><br><span style="color:grey;font-size:10px;font-weight:400;">General Manager</span></td>
</tr>
<tr>
<td style="padding-left:15px;vertical-align:bottom">
<img width="22" src="https://i.imgur.com/L7RBFZu.png" alt="Facebook" style="border:none">
<img width="22" src="https://i.imgur.com/Pj2TSoO.png" alt="Instagram" style="border:none">
<img width="22" src="https://i.imgur.com/qtmS8US.png" alt="Website" style="border:none">
</td>
</tr>
</table>
</body>
</html>
Some modern mail clients allow non-inline CSS. However, most of the email clients still require you to write your CSS inline, so the table style cannot be at the top of the page but has to be embedded like <table style="..."></table>
See https://www.campaignmonitor.com/css/ for a list which describes which clients allow what tags.
Also, and I don't know if this will make a difference, but use '20px' instead of just '20'.
I'm trying to unify the font to appear the same on all operating systems and devices. Also some design elements break on different devices. what am I doing wrong? this is my code below?
<table border="0" cellpadding="0" cellspacing="0" width="768">
<tbody>
<tr>
<td rowspan="4" border="0" cellpadding="0" cellspacing="0" height="100" width="250">
<img src="https://www.westcoastelevators.com.au/wp-content/uploads/2019/08/West-Coast-Elevators-Email-Signature-Image.jpg" alt="west coast elevators logo" width="350px" height="150" style=" margin-top: 28px">
</td>
<td colspan="4" height="20" width="200px"><p style="font-size:20px; margin-bottom: 5px; line-height: 20px; font-family: 'sans-serif', 'lato';"><strong>Full Name</strong><br>
<span style="font-size: 15px; font-family: 'sans-serif', 'lato'; color: #000000;">Managing Director</span></p></td>
</tr>
<tr height="10px" width="200px">
<td colspan="1" width="120px"><p style="margin-bottom: -0px; font-size: 15px">0000 000 000</p></td>
<td colspan="2" width="80px"><p style="margin-bottom: -0px;font-size: 15px">08 6263 5253</p></td>
</tr>
<tr>
<td height="47" colspan="3" width="220px"><p style="line-height: 0px; margin-top: 0px; font-family: 'sans-serif', 'lato';font-size: 15px">20 Wynyard St, Belmont WA 6104</p>
<p style="text-decoration: none; line-height: 10px; font-family: 'sans-serif', 'lato'; font-size: 15px">westcoastelevators.com.au </p></td>
<td width="180" ><img style="margin-right: 5px; margin-top: 10px" src="https://www.westcoastelevators.com.au/wp-content/uploads/2019/08/Artboard-3.png" alt="facebook logo"> <img style="margin-top: 10px" src="https://www.westcoastelevators.com.au/wp-content/uploads/2019/08/Artboard-4.png" alt="instagram logo"></td></tr>
</tbody>
</table>
This is a great tool for cross-browser/platform font issue: https://google-webfonts-helper.herokuapp.com/fonts/ try to download font from here and then import it in the css file.
To make the font constant everywhere, you would have to use a web font as Mr. Lister has said.
You could get fonts from all over the internet, but for now, getting fonts from here would be best.
An example, after selecting your font, you would import it into your HTML or CSS.
For HTML:
<body>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
</body>
or
<style>
#import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
</style>
For CSS:
#import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
Then to use it in your code (Note: This is how I would do it, after seeing what you are trying to do in your code):
<style>
#import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
.p {
font-family: "Lato", sans-serif;
}
<!-- You will have to remove the font-family styling from all the tags though then leave this style tag in. -->
</style>
However, I strongly advise you look into external CSS. It would make your code much easier to work with.
I am using the following code to create a button:
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0">
<tr>
<td style="border-radius: 2px;" bgcolor="#1AB394">
<a href="https://www.example.com" target="_blank" style="padding: 8px 12px; border: none; border-radius: 4px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #ffffff; text-decoration: none; font-weight: normal; display: inline-block;">
CONFIRM ACCOUNT
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
The button is used in emails. When I send the email, the button looks fine on the web mail clients:
But doesn't look right on some other mail clients such as Outlook:
Can someone please help? Thanks.
You might want to take a look at this:
outlook-rendering-issues
Item #3.
I cannot test any of that because I do not use outlook as a client, but they seem to suggest that you might have to style the td enclosing the a tag more than you have. It does almost look like it is not treating the a tag as an inline-block like you have in your style. If you add the:
padding: 8px 12px;
to the enclosing td that might fix the appearance of the button.
I have created a line of square , it works in modern browser such as Gmail in google, but for outlook , it show like this:
The 4 block combine together and also the div height is not honoured, any idea or workaround?
<tr>
<td colspan="2" style="text-align: center;padding: 10px 0px; font-family: Helvetica, Arial, Tahoma, 'SimHei','微軟雅黑', STXihei, '華文細黑', sans-serif;">
<h3 style="text-align: center;margin-top: 0px; color: #606060;">Have a Question?</h3>
<table align="center" cellpadding="0" cellspacing="0" width="700px" border="0" style="margin:auto;">
<tr>
<td style="width:25%;text-align: center;"><img width="150" style="width:150px" src="{img_dir}en/q1.jpg" /></td>
<td style="width:25%;text-align: center;"><img width="150" style="width:150px" src="{img_dir}en/q2.jpg" /></td>
<td style="width:25%;text-align: center;"><img width="150" style="width:150px" src="{img_dir}en/q3.jpg" /></td>
<td style="width:25%;text-align: center; font-family: Helvetica, Arial, Tahoma, 'SimHei','微軟雅黑', STXihei, '華文細黑', sans-serif;">
<div style="border: 3px solid #6C6E70; height: 144px; width:144px;">
<p style="color: #58595b; font-weight: bold; margin-top: 10px; margin-bottom: 0px; text-decoration: none; font-size: 16px;">Useful Links</p>
<p style="margin-top: 10px; margin-bottom: 0px; font-size: 15px;">My Account</p>
<p style="margin-top: 5px; margin-bottom: 0px; font-size: 15px;">Return Policy</p>
<p style="margin-top: 5px; margin-bottom: 0px; font-size: 15px;">FAQ</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
Thanks for helping.
In emails, particularly Outlook 7/10/13, it's better to define the td with a set width, rather than percentages. This then allows you to define the spaces properly (which I imagine Outlook is ignoring, and is mashing all of the td's together).
This is a great resource for how well supported some CSS is in various email clients. https://www.campaignmonitor.com/css/ Margin is one in particular you don't want to use, as it's not supported on Outlook.com.
Also, if this is for email, I'd recommend not using p tags (as they can render differently in different email clients), you could also center the text by adding a height to the td, rather than using nbsp's - see this previous answer for how to do that: How to writte text in the middle of an image without positioning and z-index?
Outlook doesn't support the margin property, or any of its variants: https://litmus.com/help/email-clients/outlookcom-margins/
You can use padding, but not on block elements. consider changing your p tags to a table and use padding to get the look you want.