title: CSS Padding variations between Chrome, Firefox + Safari
body: <p>I'm using font-face + CSS. Text padding appears fine in most browsers except Safari and Chrome on a Mac, where it's rendering the top padding with an extra 20px or so... This is the piece of CSS in question:</p>
  
  <pre><code>        p.style10 {font-family: 'TitilliumText22LThin', Arial, sans-serif; font-size: 17px; line-height: 19px; color: #FFFFFF; padding: 20px 40px 10px 10px}
  </code></pre>
  
  <p>Here's how it appears incorrectly in Chrome/Safari (Mac): <a href="http://siddharthkhajuria.com/srv/chrome.png" rel="nofollow">http://siddharthkhajuria.com/srv/chrome.png</a></p>
  
  <p>And correctly in Firefox (Mac): <a href="http://siddharthkhajuria.com/srv/firefox.png" rel="nofollow">http://siddharthkhajuria.com/srv/firefox.png</a></p>
  
  <p>Any help/suggestions on why it's appearing with extra padding in Chrome/Safari on a Mac?</p>
  
  <p>Thanks!
  Sidd.</p>
  
  <p>-- here's the relevant bit of html too: </p>
  
  <pre><code>&lt;!-- START OF PROMOS 1 --&gt;
  
  &lt;div class="g320" style="background-image:url(img/p1.png);
  width:310px;
  height:354px;
  overflow:hidden;"&gt;
  
  &lt;p class="style9"&gt;&lt;strong&gt;'Bootylicious' by Tom Rosenthal&lt;/strong&gt;&lt;br /&gt;&lt;br /&gt;A video for Tom's reworking of the Destiny's Child classic. I directed (with Tom), filmed and edited it.&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;/p&gt;
  
  &lt;p class="style10"&gt;&lt;strong&gt;BBC at the Edinburgh Fringe&lt;/strong&gt;&lt;br /&gt;&lt;br /&gt;I produced the website for the BBC at the 2011 Fringe Festival. I also made a range of films and took photos on-site throughout the fortnight.&lt;/p&gt;
  
  &lt;/div&gt;
  
  &lt;div class="g640"&gt;
  &lt;iframe src="http://player.vimeo.com/video/37423313?title=0&amp;amp;byline=0&amp;amp;portrait=0" width="630" height="354" frameborder="0"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  
  &lt;div class="g320"&gt;&lt;/div&gt;
  &lt;div class="clear"&gt;&amp;nbsp;&lt;/div&gt;
  
  &lt;!-- END OF PROMOS 1 --&gt;
  </code></pre>