In Firefox 3.6, IE7 and Opera 10 on Windows, this HTML has an odd behavior:
<html><head></head>
<style>
span {
font-family: monospace; background-color: green;
}
span.b {
font-weight: bold;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>
The bold span in the middle is shifted down by one pixel. That doesn't happen for other fonts.
Why is that? How can I fix it?
Why is that?
Excellent question. Just spent half an hour trying to figure out the why, to no avail. Marcgg's solution doesn't seem to work, either, the offset is still there. Google turns up nothing. This only seems to happen on Windows, not just in the browsers you mention, but also in Opera 9 and IE6. Not in Firefox 2.0 though. Puzzling.
How can I fix it?
The only solution that has worked so far for me is this:
span {
font-family: Courier; background-color: green;
}
span.b {
font-weight: bold;
}
I.e., specifying Courier instead of monospace. This renders consistently in all browsers I tested (IE6, Opera 9, FF 2.0 under Windows 2000; Opera 10, FF 3, and Konqueror under Ubuntu). As to why, I still have no idea.
It's just an optical effect. Grab a screenshot and zoom in: you'll see the text baseline does not change at all.
It should fix itself if you choose a different colour contrast.
The problem is the font "Courier New" which is the default font used my most Windows browsers when "monospace" is requested. For the bold variant, the baseline is at a different offset:
<html><head></head>
<style>
span {
font-family: "Courier New"; background-color: green;
}
span.b {
font-weight: bold; vertical-align:top;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>
With this code, you can see that the middle text is shifted up (= different baseline offset) but the background color is now aligned properly.
The solution is to request "Courier" as a font and to avoid "Courier New".