Font alignment problem in webkit based browsers
- by Mike
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.
