Comments on: Standards-Friendly IE Button Width Fix

By: Darkimmortal

Darkimmortal — Tue, 12 Feb 2008 23:15:39 +0000

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;
}

By: Brownspank

Brownspank — Tue, 23 Oct 2007 13:19:34 +0000

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.

By: Andy Towler

Andy Towler — Tue, 23 Oct 2007 12:13:23 +0000

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!).

By: An Even Better IE Button Width Fix at SixThings

An Even Better IE Button Width Fix at SixThings — Thu, 09 Nov 2006 08:37:55 +0000

[...] Just recently, Peter replied to that article, proposing an alternative solution that did away with conditional statements. This would mean that you could include the CSS fix in your main stylesheet (and not in the HTML with the conditional comment, or in a separate stylesheet for just IE fixes). [...]

By: Brownspank

Brownspank — Fri, 12 May 2006 08:02:39 +0000

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.

By: Peter

Peter — Thu, 11 May 2006 16:47:35 +0000

How about this instead of conditionally showing style blocks?

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

By: Brownspank

Brownspank — Sun, 19 Feb 2006 04:17:46 +0000

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. ;)

By: Derk

Derk — Sat, 18 Feb 2006 12:03:12 +0000

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.

By: Brownspank

Brownspank — Sat, 18 Feb 2006 04:50:13 +0000

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.

By: Derk

Derk — Fri, 17 Feb 2006 17:56:51 +0000

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