Font alignment problem in webkit based browsers

Question

Here is the code:

    <style type="text/css">
  html, body {font:0.9em/1.2em arial, verdana, helvetica, sans-serif;}
  #todayOn {background-color:#efefef; repeat-x top left;border-bottom:1px solid #ddd;border-top:1px solid #ddd;height:52px;margin:15px 0;}
  #todayOn #pageTitle {float:left;padding-left:3px;}
  #todayOn #pageTitle h2 {color:#feb425;font-size:32px;margin:10px 0 0 0;padding:0;}
  #todayOn #pageTitle h2 em {color:#7498c0;display:block;font-size:14px;font-style:italic;font-weight:normal;line-height:20px;padding:5px 0 0 0;}
  </style>

 <div id="todayOn">
  <div id="pageTitle">
   <h2>TODAY <em>on this page.com</em></h2>
  </div>
 </div>

In Firefox, IE (6+), Opera, etc. the subheader "on this page.com" displays vertically how I want it to.

In Webkit browsers like Chrome and Safari, it's pushed down a couple more pixels. What's the prob? Thanks.

Answer 1

Both line-height and padding-top will influence the space between "TODAY" and the emphasized text (at least from how I read it, it's being displayed beneath "TODAY" because of display:block). Perhaps only using padding or only using line-height will display it the same way in every browser.