Standards-Friendly IE Button Width Fix

Sometime in October of 2005, Jehiah Czebotar came up with the IE Button Width Fix. This workaround solves the extra side-padding problem that plagues buttons with long labels being displayed in Internet Explorer. The CSS went like this:

.button {
    padding: 0 .25em;
    width: auto;
    overflow: visible;
}

The fix worked fine, except when a button is contained inside a table cell, where the cell would expand to accomodate the original ("un-fixed") width of the button. Again, this problem showed up only in IE.

Last week, Jehiah came out with a revised fix that claims to solve the button-in-cell problem. It uses a conditional statement for filtering IE browsers:

<style>
.button {
    margin: 0;
    padding: 0 .25em;
    width: auto;
    overflow:visible;
}
</style>

<!--[if IE]>
<style>
.button {
    width: 1;
}
</style>
<![endif]-->

I was quick to try it out, but initially wasn’t able to make it work. I then proceeded to investigate, and it didn’t take me long to figure out that Jehiah’s new fix only worked in quirks mode, and that it failed when used in standards-compliant mode.

After tinkering with the new fix, I came up with this:

<style>
.button {
    padding: 0 .25em;
    width: auto;
    overflow:visible;
}
</style>

<!--[if IE]>
<style>
.button {
    width: 0;
}
</style>
<![endif]-->

First off, the extra margin: 0; line has been removed, as it doesn’t contribute a vital role to the fix. More importantly, the width value inside the IE filter is now set to 0. You may use other values as long as they’re less than 1 (0.5, 0.25, etc.), but it’s simpler (and shorter) to just use zero.

As a result, this fix now works with or without a valid DOCTYPE, and has been confirmed to work in IE/WIN 5.5 and 6, as well as Firefox 1.5 and Opera 8.5. (Unfortunately, those are the only browsers I have access to. If you get it to break in other browsers, let me know.)

Nonetheless, kudos to Jehiah for this very useful fix.

9 Responses to “Standards-Friendly IE Button Width Fix”


  • Wouldn’t it be more interesting to just boycot the whole IE scene instead of trying to find fixes for them?

  • Derk: Interesting, yes. Practical, not quite. A majority of people still use Internet Explorer for their web activities, hence the need for fixes that ensure visual consistency.

  • Well, we could at least minimize the support. It’s ridiculous to force a person adjusting a design because of one stupid browser.

    Boycotting would be practical though, if simply everyone would. I hope IE7 will bring some relief, though their BETA was, again, complete crap.

  • Derk: A boycott is very much possible, which might be why IE7 is taking a hint from Firefox with regards to functionality and standards-compliance. ;)

  • How about this instead of conditionally showing style blocks?

    .button[class] /*ie ignores [class]*/
    {
    padding: 0 .25em;
    width: auto;
    overflow:visible;
    }
    .button {
    width: 0;
    }

  • Peter: Actually, if you’re filtering out IE instead of providing conditional statements, it should be the other way around, like so:

    input.button {
        padding: 0 .25em;
        width: 0;
        overflow:visible;
    }
    
    input.button[class] { /*ie ignores [class]*/
        width: auto;
    }

    I had to write it down, for future usage. :)

    I have to admit, I haven’t seen widespread use of selector variants for filtering out specific browsers, which is pure genius! Let’s just hope that when IE7 Final comes out, it’ll do away with the nasty button width quirk altogether.

  • It doesn’t work when inside a table cell on IE7. However, if you just ensure that your button has width:auto and overflow:visible, and IS ENCLOSED IN A FLOATED ELEMENT within the table cell, everything is fine. No need for conditional comments or CSS hacks. Tested on FF2, Opera9, IE6, IE7.

    If floating mucks up your layout, put a clear on the next element (but not the button!).

  • Andy: Hmmm, your fix doesn’t seem to work for me. It still produces extra space to the right of the cell it’s in. Anyway, more information on this can be found in An Even Better IE Button Width Fix.

  • Far, far simpler fix that I can confirm works in both IE6 and IE7, requires no HTML modification and as far as I can tell, doesn’t affect other input boxes that don’t have a defined width (which they should have anyway).

    If other input boxes get messed up, just use a class on the top hack (IE6).

    ———————-
    THE HACK:
    ———————-

    /* IE6 */
    * html input {
    overflow: visible;
    width: 1px;
    }

    /* IE7 */
    *+html input {
    overflow: visible;
    }

Comments are currently closed.