Font alignment problem in webkit based browsers

Posted by Mike on Stack Overflow See other posts from Stack Overflow or by Mike
Published on 2010-05-18T20:29:45Z Indexed on 2010/05/18 21:50 UTC
Read the original article Hit count: 204

Filed under:
|
|
|

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.

© Stack Overflow or respective owner

Related posts about html

Related posts about css