Home/ Questions/Q 670809
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T00:18:16+00:00

In Firefox 3.6, IE7 and Opera 10 on Windows, this HTML has an odd

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0