Consider this HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
body {
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
line-height:20px;
font-size:14px;
}
.a {
float:left;
}
.b {
font-weight:bold;
}
</style>
</head>
<body>
<div class="a">something1</div>
<div class="a b">something2</div>
</body>
</html>
On all browsers but Firefox/Mac, it renders correctly, i.e bold and non-bold text are on the same baseline.
On Firefox/Mac, there is a 1px baseline difference between the bold and non-bold texts. See below for screenshot. Left is Safari 3.2.3, right is Firefox 3.0.10.
alt text http://www.jaanuskase.com/stuff/helveticaneue_ff_safari.png
Is there any way to fix this e.g with some CSS, other than to go quietly cry in the corner and use Arial (which I'd not want to do — I'd stay with Helvetica Neue if I could).
Targeting the line-height can fix this, but not sure if it's the culprit. If you have CSSEdit (or refresh a lot) you can watch the behavior by incrementing the line-height 1px at a time.
The font-size 14px makes it near impossible. FF will drop the bold element 1 pixel at some line-heights and safari will drop it at the exact opposites! (i.e. line-height 20px safari drops the bold 1 pixel while firefox renders normally, the opposite of your problem).
Except at a 3 pixel line-height, both render the same. But a 3 pixel line-height is strange, you may need to accommodate by adjusting the margin-top if it goofs up your layout.
body {
font: 14px "Helvetica Neue";
}
.b {
font-weight: bold;
}
.a {
line-height: 3px;
float: left;
margin-top: 9px;
}
At a font-size of 13px everything renders the same in both at a 21px line-height (which is closer to a regular line-height.
Playing with different font-sizes and line-heights I'm sure you'll find what you need.
Or hack it, if that's how you roll:
body {
font: 14px "Helvetica Neue";
}
.b {
font-weight: bold;
}
.a {
line-height: 21px;
float: left;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Chrome rules here */
.a {
line-height: 20px;
}
}
My gut reaction is that the floats are misbehaving. I don't have a Mac, but can you try to do this:
<span>something1</span><span class="b">something2</span>
<span class="a">something3</span><span class="a b">something4</span>
And see if their baselines are correct?
