Created
January 17, 2020 15:46
-
-
Save kruzyk/238e888c295b90677cea75e6e3836367 to your computer and use it in GitHub Desktop.
Email code tricks
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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>Linked text and numbers</title> | |
<!-- Character encoding --> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> | |
<!-- Open Graph Sharing Title --> | |
<meta property="og:title" content="Linked text and numbers" /> | |
<!-- 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"> | |
/* Reset CSS */ | |
body { | |
margin:0 auto; | |
padding:0; | |
width:100%; | |
height:auto; | |
font-size:15px; | |
background-color:#ffffff; | |
line-height-rule:exactly; | |
mso-line-height-rule:exactly; | |
} | |
body, h1, h2, h3, h4, h5, h6, p, ul, ul li, ol, ol li, blockquote { | |
margin:0; | |
padding:0; | |
-webkit-text-size-adjust:100%; | |
-ms-text-size-adjust:100%; | |
font-family: Helvetica, Arial, sans-serif; | |
font-weight:normal; | |
line-height:normal; | |
color:#666666; | |
} | |
/* 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:#666666; | |
text-decoration:none; | |
} | |
img, | |
img a, | |
a img { | |
border:0 none; | |
font-size:15px; | |
color:#666666; | |
text-decoration:none; | |
} | |
a { | |
outline:none; | |
color:#333333; | |
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; | |
} | |
strong, b { | |
font-weight:bold; | |
} | |
</style> | |
</head> | |
<body> | |
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="" style="background-color:#e4e4e4;"> | |
<tr> | |
<td align="center" class="" valign="top" style="font-size:20px;padding-top:30px; padding-bottom:30px;"> | |
<p style="color:#666666; font-size:20px;"><a href="https://www.google.com" style="color:#333333; font-size:20px;text-decoration:underline;">This is a link</a><br><br></p> | |
<p style="color:#666666; font-size:20px;">This number isn't linked 0444444333<br><br></p> | |
<p style="color:#666666; font-size:20px;">This is a link <a href="tel:0444444333" style="color:#333333;font-size:20px;text-decoration:underline;">0444444333</a></p> | |
</td> | |
</tr> | |
</table> | |
</body> | |
</html> |
Author
kruzyk
commented
Jan 17, 2020
•
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment