Rather than having separate td for triangle , I would like to make the content td with left arrow triangle. Just like in the image.
<table>
<tr>
<td width="2%" align="center" valign="middle" style="mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;font-weight: 500;font-size: 18px;letter-spacing: 0px;padding-left: 70px;padding-top: 10px;">
<p style="width: 0;height: 0;border-style: solid;border-width: 5px 10px 5px 0;border-color: transparent #fa4b00 transparent transparent; vertical-align: middle"></p>
</td>
<td width="78%" style=" background: #fa4b00; mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;letter-spacing: 0px;padding-top: 0px;text-transform: uppercase;text-align: left;">
<span style="color: white;text-align: left;text-decoration: none;-webkit-text-size-adjust: none;line-height: 30px;display: inline-block;text-transform:uppercase;font-family: 'Montserrat', sans-serif;font-weight:600;font-size:10px; padding-left: 10px;">11 -20 : 11:40 </span>
<br>
<span style="color: white;text-align: left;text-decoration: none;-webkit-text-size-adjust: none;line-height: 30px;display: inline-block;text-transform:uppercase;font-family: 'Montserrat', sans-serif;font-weight:600;font-size:12px; padding-left: 10px; text-transform: uppercase;"> Tea Break </span>
</td>
</tr>
</table>
Any Help Would be Grateful.
If you want to do it by using this kind of workflow then work with margins.
In this example i gave
margin-right:-3px;
but i would suggest using pseudo elements before and after.
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="2%" align="center" valign="middle" style="mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;font-weight: 500;font-size: 18px;letter-spacing: 0px;padding-left: 70px;padding-top: 10px;">
<p style="width: 0;height: 0;border-style: solid;border-width: 5px 10px 5px 0;border-color: transparent #fa4b00 transparent transparent; vertical-align: middle;"></p>
</td>
<td width="78%" style=" background: #fa4b00; mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;letter-spacing: 0px;padding-top: 0px;text-transform: uppercase;text-align: left;">
<span style="color: white;text-align: left;text-decoration: none;-webkit-text-size-adjust: none;line-height: 30px;display: inline-block;text-transform:uppercase;font-family: 'Montserrat', sans-serif;font-weight:600;font-size:10px; padding-left: 10px;">11 -20 : 11:40 </span><br>
<span style="color: white;text-align: left;text-decoration: none;-webkit-text-size-adjust: none;line-height: 30px;display: inline-block;text-transform:uppercase;font-family: 'Montserrat', sans-serif;font-weight:600;font-size:12px; padding-left: 10px; text-transform: uppercase;"> Tea Break </span>
</td>
</tr>
</table>
Given this is for html-email, I would advise you to use an img, to support all the email clients
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="2%" align="right" valign="middle" style="mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;font-weight: 500;font-size: 18px;letter-spacing: 0px;padding-left: 70px;padding-top: 10px;">
<img src="http://i.stack.imgur.com/uLRTb.png" style="vertical-align:top;" />
</td>
<td width="78%" style=" background: #fa4b00; mso-table-rspace: 0pt;mso-table-lspace:0pt;border-collapse: collapse;text-transform: uppercase;font-family: 'open sans', arial, sans-serif;letter-spacing: 0px;padding-top: 0px;text-transform: uppercase;text-align: left;">
<span style="color: white;text-align: left;text-decoration: none;-webkit-text-size-adjust: none;line-height: 30px;display: inline-block;text-transform:uppercase;font-family: 'Montserrat', sans-serif;font-weight:600;font-size:10px; padding-left: 10px;">11 -20 : 11:40 </span>
<br>
<span style="color: white;text-align: left;text-decoration: none;-webkit-text-size-adjust: none;line-height: 30px;display: inline-block;text-transform:uppercase;font-family: 'Montserrat', sans-serif;font-weight:600;font-size:12px; padding-left: 10px; text-transform: uppercase;"> Tea Break </span>
</td>
</tr>
</table>
The solution for using CSS triangles using border won't work (as expected) in Outlook 2007-2013, so,if you are going with that, you might need to take a look at this article
Where you have to define the triangle's shape with VML and call it defining its color and size.
Related
font-size will auto render bigger than it defiend.
only use iphone safari visit the following snippet, under the div.contenteditable="true" the content2 will auto render bigger than it defined.
but the other content1,content3,content4,content5,content6 is OK。
Has anyone had the same problem and solved it someway?
Thanks
td, th {
padding: 5px 10px;
border: 1px solid #DDD;
}
table {
margin-bottom: 10px;
border-collapse: collapse;
display: table;
}
<div contenteditable="false">
<table style="width: 300px; table-layout: fixed;">
<colgroup>
<col data-offset-left="8.5" data-offset-right="309.76043701171875" data-resize-pixel="301.26043701171875"
data-resize-percent="22.18412643679814" style="width: 33.1841%;">
<col data-offset-left="309.76043701171875" data-offset-right="881.4688110351562"
data-resize-pixel="571.7083740234375" data-resize-percent="42.099291165201585"
style="width: 33.0993%;">
<col data-offset-left="881.46875" data-offset-right="1365.5" data-resize-pixel="484.03125"
data-resize-percent="35.64294918998527" style="width: 33.6429%;">
</colgroup>
<tbody>
<tr class="firstRow">
<td valign="top" style="word-break: break-all;">
<p style="line-height: 2em;">
<span style="color: black; font-size: 16px; font-family: arial, helvetica, sans-serif;">
content1
</span>
</p>
</td>
<td valign="top" style="word-break: break-all;">
<p style="line-height: 2em;">
<span style="color: red; font-size: 16px; font-family: arial, helvetica, sans-serif;">
content2
</span>
</p>
</td>
<td valign="top" style="word-break: break-all;">
<p style="line-height: 2em;">
<span style="color: red; font-size: 16px; font-family: arial, helvetica, sans-serif;">
content3
</span>
</p>
</td>
</tr>
<tr>
<td valign="top" height="30" style="word-break: break-all;">
<p style="line-height: 2em;">
<span style="color: black; font-size: 16px; font-family: arial, helvetica, sans-serif;">
content4
</span>
</p>
</td>
<td valign="top" height="30" style="word-break: break-all;">
<p style="line-height: 2em;">
<span style="color: green; font-size: 16px; font-family: arial, helvetica, sans-serif;">
content5
</span>
</p>
</td>
<td valign="top" style="word-break: break-all;">
<p style="line-height: 2em;">
<span style="color: red; font-size: 16px; font-family: arial, helvetica, sans-serif;">
content6
</span>
</p>
</td>
</tr>
</tbody>
</table>
</div>
I've not been able to achieve it because media-query is not supported on Gmail IMAP which my client uses.
How do I achieve the column layout on the top to be like the stacking elements below it without any media query?
What is the workaround of it?
I can't find any workaround
The column layout should be shown when in desktop mode.
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td style="padding: 10px 0;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td colspan="2" style="padding: 10px 10px 0;">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"
style="border-collapse: collapse;background: #FFFFFF;border-radius: 10px;">
<tr>
<td height="45" style="padding: 65px 45px;">
<div class="hide-for-small">
<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; margin-top: 40px">
<tr style="height: 60px">
<td style="vertical-align:top; width: 54px;">
<img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="width: 25px !important" />
</td>
<td style="vertical-align:top; width: 45%;">
<span style="display: block; font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-bottom: 7px;">
text
</span>
<span style="display: block; font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif; word-break: break-all;padding-right: 50px; padding-bottom: 30px;">
text
</span>
</td>
<td style="vertical-align: top; width: 54px;">
<img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="width: 25px !important" />
</td>
<td style="vertical-align:top;">
<div style="display: block; font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-bottom: 7px;">
text
</div>
<span style="display: block; font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif;">
text
</span>
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 54px;">
<img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="width: 25px !important" />
</td>
<td style="vertical-align:top; width: 45%;">
<span style="display: block; font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-bottom: 7px;">
text
</span>
<span style="display: block; font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif; word-break: break-all;padding-right: 50px; padding-bottom: 30px;">
text
</span>
</td>
<td style="vertical-align: top; width: 54px;">
<img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="width: 25px !important" />
</td>
<td style="vertical-align:top;">
<span style="display: block; font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-bottom: 7px;">
text
</span>
<span style="display: block; font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif;">
text
</span>
</td>
</tr>
</table>
</div>
<div class="hide-for-large">
<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; margin-top: 40px">
<tr>
<td>
<img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="vertical-align: middle; width: 25px !important" />
<span style="font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-left: 10px">
stacking elements start
</span>
</td>
</tr>
<tr style="height: 5px;"></tr>
<tr>
<td>
<span style="font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif; word-break: break-all;padding-right: 50px; padding-bottom: 30px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
</span>
</td>
</tr>
<tr style="height: 30px;"></tr>
<tr>
<td>
<img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="vertical-align: middle; width: 25px !important" />
<span style="font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-left: 10px">
text
</span>
</td>
</tr>
<tr style="height: 5px;"></tr>
<tr>
<td>
<span style="font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif; word-break: break-all;padding-right: 50px; padding-bottom: 30px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
</span>
</td>
</tr>
<tr style="height: 30px;"></tr>
<tr>
<td>
<img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="vertical-align: middle; width: 25px !important" />
<span style="font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-left: 10px">
text
</span>
</td>
</tr>
<tr style="height: 5px;"></tr>
<tr>
<td>
<span style="font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif; word-break: break-all;padding-right: 50px; padding-bottom: 30px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
</span>
</td>
</tr>
<tr style="height: 30px;"></tr>
<tr>
<td>
<img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="vertical-align: middle; width: 25px !important" />
<span style="font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-left: 10px">
text
</span>
</td>
</tr>
<tr style="height: 5px;"></tr>
<tr>
<td>
<span style="font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif; word-break: break-all;padding-right: 50px; padding-bottom: 30px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
</span>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
This question already has answers here:
How to remove the underline for anchors(links)?
(15 answers)
Closed 2 years ago.
I am trying to create an email signature that has a website link. However, the link appear as underlined. I tried many options to remove the underline from the website link but failed. Any Idea to solve this?
<html>
<head>
<title>Email Signature</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>
<body>
<table
style="
width: 424px;
font-size: 10pt;
font-family: Arial, sans-serif;
line-height: normal;
"
cellpadding="0"
cellspacing="0"
border="0"
>
<tbody>
<tr>
<td
style="padding-right: 15px; border-right: 1px solid #317a00;"
width="150"
style="width: 150px; vertical-align: top;"
valign="top"
align="center"
>
<a href="{logoURL}" target="_blank"
><img
width="81"
border="0"
alt="Logo"
style="border: 0; max-width: 150px;"
src="logo.png"
/></a>
</td>
<td
style="padding-left: 15px; vertical-align: top; font-size: 9pt;"
valign="top"
>
<strong
style="
font-size: 10pt;
font-family: Arial, sans-serif;
color: #317a00;
"
>{firstName} {lastName}</strong
><br />
<span
style="
font-size: 10pt;
font-family: Arial, sans-serif;
color: #000000;
padding-bottom: 5px;
"
>{title}</span
><br />
<br />
<span style="font-family: Arial, sans-serif; color: #000000;"
><span style="font-weight: bold; color: #317a00;">T: </span
>{phone}<br
/></span>
<span style="font-family: Arial, sans-serif; color: #000000;"
><span style="font-weight: bold; color: #317a00;">M: </span
>{mobile}<br
/></span>
<span style="font-family: Arial, sans-serif; color: #000000;"
><span style="font-weight: bold; color: #317a00;">E: </span
>{email}<br
/></span>
<br /><span
ng-if="showField('company')"
style="
font-size: 9pt;
font-family: Arial, sans-serif;
color: #000000;
"
>{company}</span
>
<br /><br />
</td>
</tr>
<tr>
<td align="center" style="border-right: 1px solid #317a00;">
<a href="{instagramURL}" target="_blank"
><img
alt="Instagram icon"
border="0"
width="18"
height="18"
style="border: 0; height: 18px; width: 18px;"
src="it.png" /></a
>
<a href="{pinterestURL}" target="_blank"
><img
alt="Pinterest icon"
border="0"
width="18"
height="18"
style="border: 0; height: 18px; width: 18px;"
src="pt.png"
/></a>
</td>
<td style="padding-left: 15px;">
<a href="http://{website}" target="_blank"
><span
style="
font-size: 9pt;
font-family: Arial, sans-serif;
color: #317a00;
font-weight: bold;
"
>{website}</span
></a
>
</td>
</tr>
<tr>
<td width="424" style="width: 424px; padding-top: 15px;" colspan="2">
<a href="{bannerURL}" target="_blank" rel="noopener"
><img
border="0"
src="banner.png"
alt="Banner"
style="max-width: 424px; height: auto; border: 0;"
/></a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
This should do it:
<span style="font-size:9pt; font-family: Arial, sans-serif;; color:#317a00;; font-weight:bold">{website}</span>
more info on styling links in css can be found here: https://www.w3schools.com/css/css_link.asp
Use Text-decoration: none; you can use it in css and inline too.
/*a {text-decoration: none;}*/
<html><head><title>Email Signature</title>
<meta content="text/html; charset=utf-8"http-equiv="Content-Type">
</head>
<body>
<table style="width: 424px; font-size: 10pt; font-family: Arial, sans-serif;; line-height:normal;" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td style="padding-right:15px; border-right:1px solid #317a00;" width="150" style="width:150px; vertical-align: top;" valign="top" align="center">
<img width="81" border="0" alt="Logo" style="border:0;max-width:150px" src="logo.png">
</td>
<td style="padding-left:15px; vertical-align: top; font-size:9pt" valign="top">
<strong style="font-size:10pt; font-family: Arial, sans-serif;; color: #317a00;;">{firstName} {lastName}</strong><br>
<span style="font-size:10pt; font-family: Arial, sans-serif;; color: #000000;; padding-bottom:5px;">{title}</span><br>
<br>
<span style="font-family: Arial, sans-serif;; color:#000000;;"><span style="font-weight:bold; color:#317a00;; ">T: </span>{phone}<br></span>
<span style="font-family: Arial, sans-serif;; color:#000000;; "><span style="font-weight:bold; color:#317a00;; ">M: </span>{mobile}<br></span>
<span style="font-family: Arial, sans-serif;; color:#000000;; "><span style="font-weight:bold; color:#317a00;; ">E: </span>{email}<br></span>
<br><span ng-if="showField('company')" style="font-size: 9pt; font-family: Arial, sans-serif;; color: #000000;;">{company}</span>
<br><br>
</td>
</tr>
<tr>
<td align="center" style="border-right:1px solid #317a00;">
<img alt="Instagram icon" border="0" width="18" height="18" style="border:0; height:18px; width:18px" src="it.png">
<img alt="Pinterest icon" border="0" width="18" height="18" style="border:0; height:18px; width:18px" src="pt.png">
</td>
<td style="padding-left:15px;">
<span style="font-size:9pt; font-family: Arial, sans-serif;; color:#317a00;; font-weight:bold">{website}</span>
</td>
</tr>
<tr>
<td width="424" style="width:424px;padding-top:15px;" colspan="2">
<img border="0" src="banner.png" alt="Banner" style="max-width:424px; height:auto; border:0;">
</td>
</tr>
</tbody>
</table>
</body>
</html>
Have you tried this? : text-decoration:none;
Add a style attribute to the anchor tag and add the text-decoration to none. Example:
style="text-decoration: none"
try this CSS style.
a,a:hover{text-decoration: none;}
Add inline CSS to the anchor tag
style="text-decoration: none;
I am building a email signatures and have trouble on Android. Everywhere works fine, but in Android email client i have big spaces between table rows. I send signature from MS Outlook 2013 and Outlook add to code own span's:
<span style=3D'font-size:12.0pt;font-family:"Times New =Roman","serif"'> <o:p></o:p></span>
I don't know what's that but 99% it's a reason of troubles.
Original code looks like this:
<tr>
<td width="40px"></td>
<td width="20">
<span style="font-family: Arial, sans-serif; font-size: 11px; line-height: 16px; font-weight: bold;color: #004e7c;">
W
</span>
</td>
<td width="260px" >
<span style="font-family: Arial, sans-serif; font-size: 11px; line-height: 16px; font-weight: regular; font-style: italic; color: #004e7c;">
example.com
</span>
</td>
</tr>
When I send email from Mailchimp, everything is good and code looks like this (classes form head included to html)
<tr style="font-family: Arial, sans-serif;color: #004e7c; margin: 0;padding: 0;">
<td width="40px" style="font-family: Arial, sans-serif;color: #004e7c;padding: 2px 0;margin: 0;"></td>
<td width="20px" style="font-family: Arial, sans-serif;color: #004e7c;padding: 2px 0;margin: 0;">
<span style="font-family: Arial, sans-serif;font-size: 11px;line-height: 16px;font-weight: bold;color: #004e7c;">
W
</span>
</td>
<td width="260px" style="font-family: Arial, sans-serif;color: #004e7c;padding: 2px 0;margin: 0;">
<span style="font-family: Arial, sans-serif;font-size: 11px;line-height: 16px;font-weight: regular;font-style: italic;color: #004e7c;">
example.com
</span>
</td>
</tr>
But email form Outlook looks like this:
<tr><td =
style=3D'padding:1.5pt 0in 1.5pt 0in'></td><td width=3D20 =
style=3D'width:15.0pt;padding:1.5pt 0in 1.5pt 0in'><p =
class=3DMsoNormal><b><span =
style=3D'font-size:8.5pt;font-family:"Arial","sans-serif";color:#004E7C'>=
W</span></b><span style=3D'font-size:12.0pt;font-family:"Times New =
Roman","serif"'> <o:p></o:p></span></p></td><td style=3D'padding:1.5pt =
0in 1.5pt 0in'><p class=3DMsoNormal><i><span =
style=3D'font-size:8.5pt;font-family:"Arial","sans-serif";color:#004E7C'>=
<a href=3D"http://example.com/"><span =
style=3D'color:#004E7C'>example.com</span></a> </span></i><span =
style=3D'font-size:12.0pt;font-family:"Times New =
Roman","serif"'><o:p></o:p></span></p></td></tr>
There We have this <span>, what causes troubles. How i can eliminate this <span>?
Simple solution is to remove the span and place the styling into the TD tag. This is actually a more reliable way to style text anyway. (Also, when declaring the html width/height, you just do the number, you do not add the px.) It would also be a good idea to add a styling in the stylesheet that 0's the P tags padding and margin as Outlook likes to throw in P tags. E.g.
<style>
p {margin: 0; padding: 0; }
</style>
---------------------------
<tr style="font-family: Arial, sans-serif;color: #004e7c; margin: 0;padding: 0;">
<td width="40" style="font-family: Arial, sans-serif;color: #004e7c;padding: 2px 0;margin: 0;"></td>
<td width="20" style="font-family: Arial, sans-serif;color: #004e7c;padding: 2px 0;margin: 0; font-size: 11px;line-height: 16px;font-weight: bold;color: #004e7c;">W</td>
<td width="260" style="font-family: Arial, sans-serif;color: #004e7c;padding: 2px 0;margin: 0; font-size: 11px;line-height: 16px;font-weight: regular;font-style: italic;color: #004e7c;">example.com</td>
</tr>
i am trying to set a global font in an email. The Mail is built using tables to keep compatibility but there is one table that just does not accept my styles. What I have done:
{literal}
<style>
*,table, div, p, td, tr, #tabledetails, .tabledetails {
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif !important;
color: #000000;
font-size: 12px;
}
</style>
{/literal}
...
<table id="tabledetails" class="tabledetails" width="100%" border="0" cellspacing="0" cellpadding="4" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">...
<td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">{$order_values.products_quantity} x</td>
So as you see I tried about everything i could to set the font (and not use Times New Roman like Outlook loves to do) but it still doesnt work. What else can i possibly do?
---- edit ----- complete email ----
<link href="{$_system_mail_css}" type="text/css" rel="stylesheet">
{literal}
<style>
*,table, div, p, td, tr, #tabledetails, .tabledetails {
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif !important;
color: #000000;
font-size: 12px;
}
</style>
{/literal}
<table cellpadding="0" cellspacing="0" class="email_container" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify;">
<tr>
<td colspan="3" class="email_toplogo">
<div class="email_toplogo"><img src="{$_system_logo_url}" /></div>
</td>
</tr>
<tr>
<td class="email_table_left_bg" valign="top">
<div class="email_table_left"></div>
</td>
<td class="email_table_center_bg" valign="top">
<div class="email_content">
<h1>Hallo {$order_data.delivery_firstname} {$order_data.delivery_lastname},</h1>
<p>vielen Dank für Ihre Bestellung im Onlineshop von super cool company name i shouldnt tell anyone ;).
Wir werden Ihre Bestellung schnellstmöglich ausführen. Sie bekommen bei jeder Statusänderung Ihrer Bestellung eine automatisch generierte Email.</p>
<hr>
<P>Nachfolgend finden Sie Ihre Bestelldetails zur Kontrolle:</p>
<p>{txt key=TEXT_ORDER_NUMBER}: {$order_data.orders_id}</p>
<p>{txt key=TEXT_ORDER_DATE}: {$order_data.date_purchased}</p>
<p>E-Mail: {$order_data.customers_email_address}</p>
<table cellpadding="0" cellspacing="0" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;">
<tr>
<td style="width: 250px;">
<div class="shippingaddress">
<h2>{txt key=TEXT_SHIPPING_ADDRESS}</h2>
<p>{if $order_data.delivery_company}
{$order_data.delivery_company}<br />
{/if} {$order_data.delivery_firstname} {$order_data.delivery_lastname}<br />
{$order_data.delivery_street_address}<br />
{if $order_data.delivery_suburb} {$order_data.delivery_suburb}<br />
{/if} {$order_data.delivery_postcode} {$order_data.delivery_city}<br />
{if $order_data.delivery_state}{$order_data.delivery_state}
{/if}{$order_data.delivery_country}<br />
</p>
</div>
</td>
<td>
<div class="paymentaddress">
<h2>{txt key=TEXT_PAYMENT_ADDRESS}</h2>
<p>{if $order_data.billing_company} {$order_data.billing_company}<br />
{/if} {$order_data.billing_firstname} {$order_data.billing_lastname}<br />
{$order_data.billing_street_address}<br />
{if $order_data.billing_suburb} {$order_data.billing_suburb}<br />
{/if} {$order_data.billing_postcode} {$order_data.billing_city}<br />
{if $order_data.billing_state}{$order_data.billing_state}
{/if}{$order_data.billing_country}<br />
</p>
</div>
</td>
</tr>
</table>
{if $payment_info}<hr><h2>{txt key=TEXT_PAYMENT_INFOS}</h2>
<p>{$payment_info}</p>{/if}
<hr>
<table id="tabledetails" class="tabledetails" width="100%" border="0" cellspacing="0" cellpadding="4" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">
<tr class="headerrow">
<td class="left">{txt key=TEXT_QTY}</td>
<td class="left">{txt key=TEXT_ARTICLE}</td>
<td class="left">{txt key=TEXT_PRODUCTS_MODEL}</td>
<td class="right">{txt key=TEXT_SINGLE_PRICE}</td>
<td class="right">{txt key=TEXT_TOTAL_PRICE}</td>
</tr>
{foreach name=aussen item=order_values from=$order_products}
<tr class="{cycle values="contentrow1,contentrow2"}">
<td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">{$order_values.products_quantity} x</td>
<td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">{$order_values.products_name}</strong></td>
<td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">{$order_values.products_model}</td>
<td class="right" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">{$order_values.products_price.formated}</td>
<td class="right" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">{$order_values.products_final_price.formated}</td>
</tr>
{$order_values.products_information.html_content}
{/foreach}
<tr>
<td colspan="5" align="right" class="subtotal">
<div align="right">
<p>{txt key=TEXT_SUB_TOTAL}: {$total.product_total.formated}</p>
{foreach name=aussen item=order_total_values from=$order_total_data}
<p>{$order_total_values.orders_total_name}:
{$order_total_values.orders_total_price.formated}</p>
{/foreach} {foreach name=aussen item=tax_data from=$total.total_tax}
<p>{txt key=TEXT_TAX} {$tax_data.tax_key}%:
{$tax_data.tax_value.formated}</p>
{/foreach}
<p><span class="doubleline">{txt key=TEXT_TOTAL}: {$total.total.formated}</span></p>
</div>
</tr>
</table>
</div>
<hr>
<div class="email_footer">{$_system_footer_html}</div>
</td>
<td class="email_table_right_bg" valign="top">
<div class="email_table_right"></div>
</td>
</tr>
</table>
---- edit 2 ---- the produced code for the product listing part
<table id="tabledetails" class="tabledetails" width="100%" border="0" cellspacing="0" cellpadding="4" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">
<tr class="headerrow">
<td class="left">Anzahl</td>
<td class="left">Artikel</td>
<td class="left">Art.Nr.</td>
<td class="right">Einzelpreis</td>
<td class="right">Gesamtpreis</td>
</tr>
<tr class="contentrow1">
<td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">1.00 x</td>
<td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">Mavic Rennradschuh Zxellium 2011 black / white / yellow mavic</strong></td>
<td class="left" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;">14207</td>
<td class="right" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;"><span class="price"> 220,00 EUR</span></td>
<td class="right" style="font-family: Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px !important;"><span class="price"> 220,00 EUR</span></td>
</tr>
<tr class="contentrow1"> <td class="right" valign="top"></td> <td class="left" valign="top"> <h3> Schuhgröße: </h3> </td> <td class="right" valign="top"></td> <td class="right" valign="top"></td> <td class="right" valign="top"></td> </tr> <tr class="contentrow1"> <td class="right" valign="top"></td> <td class="left" valign="top"> 42 </td> <td class="right" valign="top"> </td> <td class="right" valign="top"> </td> <td class="right" valign="top"> </td> </tr>
<tr>
<td colspan="5" align="right" class="subtotal">
<div align="right">
<p>Zwischensumme: <span class="price"> 220,00 EUR</span></p>
<p>Nachnahme:
<span class="price"> 3,60 EUR</span></p>
<p>DHL - versichert:
<span class="price"> 0,00 EUR</span></p>
<p>inkl. MwSt. 19%:
<span class="price"> 35,70 EUR</span></p>
<p><span class="doubleline">Gesamtsumme: <span class="price"> 223,60 EUR</span></span></p>
</div>
</tr>
</table>
Outlook is a pain in the a** when it comes to email rendering.
The only safe thing to do is add a style="font-family: Verdana, Arial, Helvetica, sans-serif;" to every paragraph and div. We all know it sucks - but tell this to Microsoft...
Only use inline styles on html emails. It will be stripped out in some email clients. Gmail is one example.
You'll need to add this to every td containing text.
style="font-family: Verdana, Arial, Helvetica, sans-serif;"
As others have said, you need to flatten the style classes into inline styles on all the objects.
I had a similar problem and wrote a C# function to flatten the styles into the HTML.
Flatten CSS into HTML using C# w/ MVC