Note that there are some explanatory texts on larger screens.

plurals
  1. PORendering HTML emails depending which client opens it
    primarykey
    data
    text
    <p>HTML emails are a fickle bunch. My problem lies with superscripting. </p> <p>My code is required to work in certain desktop clients:</p> <ul> <li>Outlook 2000</li> <li>Outlook 2003</li> <li>Outlook 2007</li> <li>Outlook 2010</li> </ul> <p>As well as in certain web-based email clients (Firefox, Chrome, Explorer):</p> <ul> <li>Gmail</li> <li>Yahoo</li> <li>AOL</li> <li>Internet Explorer 7 browser (lol)</li> </ul> <p>Currently the best cross-browser code I've come across is:</p> <p><code>&lt;sup style="font-size:11px; line-height:0; vertical-align:3px;"&gt;</code></p> <p>This works wonderful in everything except Outlook 2007 and 2010 where the font-size is shrunk to become almost non-legible. Other code such as:</p> <p><code>&lt;sup style="position:relative; vertical-align:baseline; bottom:4px;"&gt;</code></p> <p>This code works great in everything, except Gmail which strips out the positioning causing the superscript to sit on the baseline.</p> <p>After trying several dozens different combinations of styling the above 2 are the ones the provide the most consistent font size and line height.</p> <p><strong>The Question</strong></p> <p>Is there some snippet of code I can place in the head to tell the email to use a certain code or class depending on which client the email is opened in? I know Gmail prefers inline styling over classes so perhaps I could apply the Gmail pretty code inline, but if it's opened outside of Gmail something will cancel out the inline styling and fall back on a class.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload