Hi John,
Have you tried using @media screen ?
/* Load Google fonts through @media screen so Outlook 2007/2010/2013/2016 doesn't default to Times New Roman. Litmus uses @font-face with their newsletters too! */
@media screen {
@font-face {
font-family: 'Heebo';
font-style: normal;
font-weight: 300;
src: local('Heebo Light'), local('Heebo-Light'), url(https://fonts.gstatic.com/s/heebo/v3/NGS3v5_NC0k9P9ldb6RMkK4.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
}
I found this a few years ago in a Litmus email newsletter.
Thanks,
Lee.
Hi Robin,
Ok I see. Do you know how often Litmus update their system to render latest versions throughout?
Would be good to find out that information.
Seems strange Outlook 365 would remove the ul margins, and perhaps it's all margins.
Thanks,
Lee.
Hi Joshuel,
Using capital M for margin works good for me, like this:
<!--[if (mso)|(IE)]>
<style>
ul {
Margin:0;
}
ul li {
Margin-left:20px;
}
</style>
<![endif]-->
I created a working demo here:
https://litmus.com/builder/38a93ec
I made the ul background ccc so you can see the style is targeting correctly.
Thanks,
Lee.
Hi Hyde,
The best solution is to create a grid which doesn't rely on CSS for stacking TD or TH.
If CSS isn't supported, then media queries won't be supported either.
I created this grid system a year ago. This uses DIVs (and tables for MSO and IE) which automatically stack depending on browser width:
https://litmus.com/builder/b8b7148
Try using this.
Thanks,
Lee.
Hi Chris,
The button code fixes the text being chopped, but yes the rounded corners only work on Outlook 2016 Mac.
If you want a 100% bullet proof button, best to use a table with 3 TDs and use images with rounded corners for the left and right sides of the button and text in the middle.
Something like this:
<table border="0" cellspacing="0" cellpadding="0" style="background-color: #cccccc;">
<tbody>
<tr>
<td align="left" valign="middle" bgcolor="#cccccc">img</td>
<td align="left" valign="middle" bgcolor="#cccccc"><a href="https://litmus.com">button text</a></td>
<td align="left" valign="middle" bgcolor="#cccccc">img</td>
</tr>
</tbody>
</table>
Thanks,
Lee.
Hi Chris,
I created a button which has worked great when testing in Litmus. Try this one:
<a href="https://litmus.com" style="font-family:Helvetica, Arial, sans-serif;font-weight:normal;font-size:14px;color:#ffffff;text-decoration:none;padding-top:10px;padding-bottom:10px;padding-left:20px;padding-right:20px;display:inline-block;width:auto;border-radius:20px;background-color: #999999;border: 2px solid #999999;mso-border-alt:10px solid #999999;mso-padding-alt:0px;">Lees button →</a>
You may need to adjust a few settings, such as border-radius, padding-top, bottom, left right.
See also mso-border-alt and mso-padding-alt.
Let me know how you go!
Thanks,
Lee.
Hi Timothy,
I found it only works if you use px sizes. With bg-hero-600.jpg make sure this bg image is the same size as the intended space behind the text content, then specify it's size. This will then fit nicely behind your content and doesn't need to stretch by percent. Also change: fill type from 'tile' to 'frame'. This will stop the bg image from repeating.
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:400px;">
<v:fill type="frame" src="http://www.lb-digital.com/email/images/bg-hero-600.jpg" color="#999999" />
<v:textbox inset="0,0,0,0">
<![endif]-->
Thanks,
Lee.
Hi Timothy,
Here's a basic example of a background image using VML. Here you can see where the code needs to be placed in the td.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- Fix DPI Scaling Issues in Outlook -->
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<title>HTML Email Background Image by lb-digital.com</title>
<!-- Character encoding -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- Set 100% scale, allow zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Remove default blue colour from links so you can style your own -->
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="telephone=no">
<meta name="x-apple-disable-message-reformatting">
<!-- Prevent iOS 11 from automatically scaling your email -->
<meta name="x-apple-disable-message-reformatting">
<!-- Enable CSS3 and media queries in Windows Phone 7.5 and higher -->
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<style type="text/css">
body {
margin:0 auto;
padding:0;
width:100%;
height:auto;
font-size:15px;
background-color:#fff;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}
/* Outlook.com and Hotmail .ExternalClass class override */
.ExternalClass {
width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
/* Outlook 2007/2010/2013 'Read in Browser' Link */
#outlook a {
padding:0;
}
/* Outlook fix spacing left and right side of tables */
table {
mso-table-lspace:0pt;
mso-table-rspace:0pt;
border-spacing:0;
}
table, td {
border-collapse:collapse; /* If you’re using border-radius, use border-collapse:separate; instead */
}
/* IE ensure image resizing looks a little better using: -ms-interpolation-mode:bicubic; */
img {
-ms-interpolation-mode:bicubic;
border:0 none;
height:auto;
line-height:100%;
outline:none;
color:#999;
text-decoration:none;
}
img,
img a,
a img {
border:0 none;
font-size:15px;
color:#666;
text-decoration:none;
}
a {
color:#666;
text-decoration:none;
}
/* Remove blue links on Apple and Samsung devices */
a[x-apple-data-detectors],
#MessageViewBody a {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.bg-scale {
background-color:#999999;
background-size:cover;
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td background="http://www.lb-digital.com/email/images/bg-hero.jpg" align="center" width="100%" valign="top" class="bg-scale" style="background-image: url('http://www.lb-digital.com/email/images/bg-hero.jpg');background-color:#999999; background-size:cover; background-repeat: no-repeat; background-position: center center;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:400px;">
<v:fill type="tile" src="http://www.lb-digital.com/email/images/bg-hero-600.jpg" color="#999999" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="90%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="600" align="left" valign="middle">
Content
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Thanks,
Lee.