title: Rendering HTML emails depending which client opens it
body: <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>