bug 471 - font-weight:600 stretches text in IE

Issue: #471
Affects: IE6, IE7, IE8 Beta 1, IE8 Beta 2, Chrome 5,6,7
Fixed In: IE8 PR 1

Update: This apparently affects Google Chrome now (v5,6,7)


When styling text on your site there are several options for bolding. You can use the classic <b> tag, the <strong> tag, or any tag with styling set for the font-weight.

Example:

<style type="text/css">
  .example1{
    font-weight:bold;
  }
  .example2{
    font-weight:700;
  }
  .example3{
    font-weight:??;
    /*normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900|inherit*/
  }
</style>

Every option works as intended with the exception of 600 in IE. IE will render any text with a font-weight:600 about 10% wider than normal text (regardless if ClearType is turned on or off).

The Quick Brown Fox Jumps Over The Lazy Dog. Please Don't Hurt The Web - Use Web Standards. (@500)

The Quick Brown Fox Jumps Over The Lazy Dog. Please Don't Hurt The Web - Use Web Standards. (@600)

The Quick Brown Fox Jumps Over The Lazy Dog. Please Don't Hurt The Web - Use Web Standards. (@700)

Note: Updated the style to a fixed-width font to better illustrate.

Known Workarounds: None.

Related Issues: None.


Bug/Site Feedback |
Submit a bug

bug 101 - buttons render stretched and distorted in IE (WinXP)

Issue: #101
Affects: IE6, IE7 (on WinXP)
Fixed in: IE8 Beta 1

On Windows XP in IE6 or IE7, with the default themes applied the input button element renders stretched and distorted when the length of the value exceeds 17 characters.

In fact, the padding on the button also changes, depending on the length of the value attribute, which is also a buggy.

Example:

<input type="button" name="test" value="Distorted in IE on XP" onclick="alert('How do I look?');"/>

View this page in Windows XP in IE6 or IE7 to see the rendering bugs.










You don't even have to use Windows XP to see the padding expansion bug. IE6 on Windows2000 or Windows2003 will also display the issue.

Known Workarounds: CSS Hacks.

Example Workaround Code:

{soon}

Related Issues: None.