Button Rendering problem in IE RRS feed

  • Question


    I came across a strange button rendering problem in IE. If a button's with is > 191px, the button's edge is thicker and looks kind of pixelated. Here is some simple code that I'm seeing it in...


    <input type="button" style="width: 191px" value="Looks Normal">


    <input type="button" style="width: 192px" value="Looks Bad">


    In FFox, both buttons look just fine. (By the way, I'm using IE version 7.0.5730.11).


    This isn't really a serious problem but, I'd really like to know what may be causing this. Anyone have any ideas?

    Tuesday, March 25, 2008 10:42 PM

All replies

  • Hi Mothra,


    I could be your font settings for IE. Tools>Internet Options - General tab, Accessibility button, check "Ignore font styles specified on web pages". Or alternatively your Desktop Theme settings for XP.



    BTW. You would do better not to specify the width of buttons or input tags and allow them to grow or shrink with the users Text Size settings (View>Text Size menu). A covenant of this is that you have to specify the Font-Size of these tags as "1em" so that the text size and thereofore height and width will be in proportion to the users Text Size settings.


    eg. <button style="font-size:1em">This button will shrink and grow with text size</button>



    Wednesday, March 26, 2008 11:06 PM

    Changing the Accessibility settings had no effect.


    BTW. I don't specify the size on buttons normally. That was just to demonstrate the problem. If I have a button with long enough text in it, the same thing happens. Also, it happens on several different machines here at the office. I guess I should also see what happens @ home too!

    Wednesday, March 26, 2008 11:14 PM
  • Mothra,

    This is a known bug (that is fixed in IE8 Beta 1!!!!)

    See the bug (101) here for details:

    Best of luck.
    Friday, March 28, 2008 6:13 PM