Outlook 2010 not respecting CSS, even <font> tags for every text -
we need our emails on machines have helvetic neue. our font stack is:
font-family: 'helvetica neue',helveticaneue,helvetica,arial,sans-serif; we have style declarations in each td, each div, each table, body , everything. still, outlook breaks , defaults ugly times new roman when doesn't find first font in listing -- isn't supposed go through fonts , show ones exist (arial on windows)?
frustrated, put these style declarations in ugly , laborious <font> tags around text. , text has these declarations, styling done on again inside font tag's <style>.
litmus shows outlook 2003, 2007 , 2010 showing these in arial on windows.
yet, @ our office, folks receiving these emails in times new roman. missing? directions or pointers why outlook 2010 (the version use) forces times new roman?
other questions, such 1 -- outlook 2010 overriding font-family arial times new roman -- not answer question.
thanks! below example of code:
`
<table align="center" width="95%" cellpadding="8" cellspacing="8" style="font-family: 'helvetica neue',helvetica,'arial unicode ms',arial,sans-serif;font-size: 14px;color: #999999;border-spacing: 0;border-collapse: collapse;"> <tr> <td height="18" align="center" valign="middle" style="font-family: 'helvetica neue',helvetica,'arial unicode ms',arial,sans-serif;font-size: 14px;color: #999999;border-top: 1px solid #dddddd;border-bottom: 1px solid #dddddd;border-collapse: collapse;"> <span class="hide-on-small" style="font-family: 'helvetica neue',helvetica,'arial unicode ms',arial,sans-serif; font-size: 14px; color: #999999; ">rummy & bingo monthly<img src="http://d3cbux4et72c14.cloudfront.net/wtd2/sep.jpg" alt=" - " width="55" height="10" style="border: 0;"> </span>issue <span style="font-family: 'helvetica neue',helvetica,'arial unicode ms',arial,sans-serif; font-size: 14px; color: #999999; ">05</span> <img src="http://d3cbux4et72c14.cloudfront.net/wtd2/sep.jpg" alt=" - " width="55" height="10" style="border: 0;"> <span style="font-family: 'helvetica neue',helvetica,'arial unicode ms',arial,sans-serif; font-size: 14px; color: #999999; ">aug 2013</span> </td> </tr> </table> `
this solve problem:
<style type="text/css"> table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;} table td {border-collapse: collapse;} </style> <!--[if gte mso 9]> <style>.outlook { font-family: arial, sans-serif; }</style> <![endif]--> </head> <body> <table align="center" width="95%" cellpadding="8" cellspacing="8"> <tr> <td class="hide-on-small" align="center" valign="middle" style="border-top: 1px solid #dddddd;border-bottom: 1px solid #dddddd;font-family: 'helvetica neue',helvetica,arial,sans-serif; font-size: 14px; color: #999999;"> <span class="outlook">rummy & bingo monthly</span> </td> </tr> </table> </body> - i removed unnecessary reiterations of font-style declaration. there's no need declare anywhere other td.
- i moved font-style declaration span td along css class assignment of "hide-on-small".
the font-style separated fix outlook problem. - in head, below other css may have declared, added conditional comment read outlook. within comment css class tell outlook font arial. therefore outlook ignore fact using font isn't available, negating reason find own substitution.
also, pulled out inline css border-collapse declaration because can declare in head , in body, give tables attribute of border="0". instead of writing style="border-collapse:none;" dozen or more times.
Comments
Post a Comment