Last time around, I went about writing an article documenting a revision for Jehiah’s IE Button Width Fix that would allow it to behave correctly, given a proper DOCTYPE. It worked well, with a minor downside that it required the use of IE conditional statements in your HTML to dish out the fix to just Internet Explorer browsers.
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).
Initially, his solution didn’t work, but I knew he was on to something here. He utilized attribute selectors to filter out IE, which was real crafty because it pans out as valid code. According to La Chatte Noire Development Area, only IE browsers (with the exception of version 7 beta) didn’t support attribute selectors. That meant that it could be used in place of IE conditional comments to serve the same purpose. After some code reordering, I came up with the following:
input.button {
padding: 0 .25em;
width: 0; /* IE table-cell margin fix */
overflow: visible;
}
input.button[class] { /* IE ignores [class] */
width: auto; /* cancel margin fix for other browsers */
}
It is also worth noting that width: 0; can be replaced with width: 1px;. The problem with width: 1; (without the px) in Jehiah’s version is actually a unit issue, and not a value one, as pointed out by Martin in his own rendition of the fix.
As with previous versions, this solution still requires that the button/submit element is assigned a button class. And as usual, I was able to test this in IE/Win 5.5 and 6, Firefox 1.5, and Opera 8.5. If you get to test it on other browsers, do let me know.
Lastly, credits go out to those people mentioned in this article. You all rule. 
Update 2006-11-09
After some long-overdue retesting, it looks like this fix works with Internet Explorer 7 Final, with the exception of buttons located inside table cells (as mentioned by Jordan). The problem here is that IE7 still renders buttons the way it did in previous versions (with side paddings proportional to its width). At the same time, it also now supports attribute selectors, which reverts its buttons’ widths to auto, causing the table cell to become much wider than the button (when in fact it should be wrapping it, assuming that the table cell doesn’t have a set width).
An initial solution of mine was to add another attribute selector that targeted buttons inside table cells:
input.button {
padding: 0 .25em;
width: 0; /* IE table-cell margin fix */
overflow: visible;
}
input.button[class] { /* IE < 7 ignores [class] */
width: auto; /* cancel margin fix for other browsers */
td input.button[class] {
width: 100%;
}
The above addition makes it work correctly across all IE/Win versions (starting with 5.5, and especially 7), but then Opera 9 now behaves like IE did without the fix. Catch-22, I know.
Since the target of this fix from the start was to stay away from hacks that produce invalid CSS, I’m not really sure how else to filter out Opera 9 or IE7. So unless you’re sure your layout doesn’t require a button inside table cell, we’re back to using conditional statements. Sigh.
Nice solution of the problem, 10x!
thanks very much for the fix (it was a difficult Google search but i finally found you). in my case, only
overflow: visible;was needed (no width or margins). the button is inside of a floated DIV.
i’m using IE 6.0.2800.1106.
some guy: That does work perfectly in cases such as yours (where the button is contained in the DIV). Just remember that once you put those buttons inside table cells, you’ll begin seeing unintended margins to the right of the buttons, and they look nasty.
You all still around? I don’t understand what you mean and I too am having a problem in Opera. My css button width in pixels is not being followed as it is in other browsers. How do I fix in opera? Please let me know, Thanks a lot!
Rianna
All I have in the css class for button width is width:135px;
Thanks for the fixes, undecided which way to go for the moment (this version or the conditional since I already have the stylesheet) but either way good to know the width of buttons wont be mucking up my floats in IE *groan* anymore.
How does that work for you?
Could anyone please post his html code?
This is my code, an that doesn’t work in ie 7 rc1
And this is the css code:
input.button {
padding:0 .25em;
width:0;
overflow:visible;
}
/* ie hack */
input.button[btn-next], input.button[btn-common] {
width:auto;
}
input.btn-next {
cursor:pointer;
color:#003399;
text-align:left;
padding-left:20px;
padding-top:5px;
padding-right:5px;
padding-bottom:5px;
border-top:solid 1px #DDDDDD;
border-left:solid 1px #DDDDDD;
border-right:solid 1px #BBBBBB;
border-bottom:solid 1px #BBBBBB;
background:#F9F9F9 url(../Img/arrow.gif) no-repeat scroll 8px center;
}
input.btn-common {
cursor:pointer;
color:#003399;
text-align:left;
padding:5px;
border-top:solid 1px #DDDDDD;
border-left:solid 1px #DDDDDD;
border-right:solid 1px #BBBBBB;
border-bottom:solid 1px #BBBBBB;
background:#F9F9F9;
}
Many thanx for any suggestions!
Mike
Hi, it’s me again
I wasn’t able to post my html-code in my last message:
So here’s it again:
I hope it will work!?
Thx
Mike
It works wonderfully for everything but IE 7 when you have a button in a table cell. You need another definition.
There aren’t many uses for buttons in table cells, but in my case I needed it. The solution requires an extra div around the button that sets the width, but the class css definition is only seen by IE7.
This assumes you’ve used the method above, which removes the excess padding, then you can simply set the width and hide everything else.
:first-child+html td .ie7button {
width: 150px /* or whatever you need */
overflow: hidden;
}
The resizing of text works, it’s a little odd, but it works.
hope this helps someone,
Jordan
I think the best solution will be as below:
The css will be as below:
input {
margin: 0;
padding: 0;
width: auto;
overflow: visible;
}
Works everywhere. Only problem is that in firefox there still is 2 px left & right margin.
But still better than the above all as this is simplest & is compatible with all browsers, higher or lower versions.
Thank god i was looking for that since a long time, now got it:-) thanks very much!!!
Thanks ! Realy nice fix
w00t! Your fix, width:100%, finally solved this issue for me when the button is in a TD! Friggin IE7!!! Nothing else worked. I tried everything!
Thank you, great solution.
Hi, all - this site was helpful so I though I’d return the favour. The button in a td problem can be fixed using javascript. Get the array of the relevant inputs, find the offsetWidth and then set the button width to that value. Hopefully that works without issue.
var arrInputs = eContainer.getElementsByTagName(’INPUT’);
var arrInputsSubmit = new Array();
// find all inputs
for (i=0; i < arrInputs.length; i++) {
if (arrInputs[i].type == ’submit’ || arrInputs[i].type == ‘button’) {
// get the widths and add padding to eliminate IE7 bug
var eWidth = getWidth(arrInputs[i]);
if (arrInputs[i].clientWidth) { arrInputs[i].style.width = arrInputs[i].offsetWidth;
}
}
}
This is a great fix to a problem that Microsoft should address with IE. Although IE7 has moved further with leaps toward web standards, it’s still got a ways to go.
Thanks again!