Button Width in IE - Revised
In my previous post on Button Width in IE I proposed a solution to work around the rendering bug in IE which creates extra padding in input buttons.
However, as it turns out, that fix doesn't work so well when the button is inside a table cell. Here is an image of the problem (table cell in red) and a workaround for that.
My old sution was to use width:auto;and overflow:visible; to get the browser to size things up right. The workaround is to use width:1; by default and feed IE a different value (width:auto;) using a conditional comment. It actually works pretty well.
<style>
td{border:1px solid red;}
.button{margin:0;padding:0 .25em;width:auto;overflow:visible;}
</style>
<!--[if IE]>
<style>.button{width:1;}</style>
<![endif]-->
There is an example page showing the problem, and solutions available.
2 years, 4 months ago
This solution doesn’t seem to work in IE6. I tried width: 0 (or any value less than 1, for that matter, 0.9, 0.25, etc…) inside the conditional statement, and it works on both IE5.5 and IE6, as well as FF 1.5 and Opera 8.5. I haven’t tested it enough to ensure that it won’t break on other browsers, though.
2 years, 4 months ago
Ok, I think I found the problem. Your fix works only in ‘quirks’ mode. Setting the width to a value less than one will make it work in both ‘quirks’ and ’standards’ mode. I’ll be posting my findings soon, if you don’t mind.
2 years, 4 months ago
[…] 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: […]
2 years, 3 months ago
[…] Today, I finally came accross a fix for the ridiculous widths of form buttons in IE. Jehiah Czebotar came up with this solution and it works perfectly. No more rediculously wide IE buttons. […]
2 years, 3 months ago
Thanks for a nice easy solution to a very annoying problem.
Just one thing about the width:1 fix. I think you should change this to width:1px instead. In standards mode, width:1 is ignored (as Brownspank mentioned in his earlier comments).
2 years, 1 month ago
[…] 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. […]
2 years, 1 month ago
I finally find out, that with width=1pt or 1px, the problem for IE and Firefox seem solve.
Here is my button style. hope it’ll help !
.button {
width:1pt;
overflow:visible;
font-weight: bold;
font-size: 9pt;
margin:0;padding:0;
border:0;
}
Kéké.
1 year, 9 months ago
@Vineet: I also came across the button-in-a-cell problem and discovered that if you set the width of the button to 1px and let it auto-expand, the table will shink properly.
1 year, 9 months ago
[…] http://jehiah.com/archive/button-width-in-ie-revised […]
1 year, 8 months ago
Microsoft should have fixed this in IE7. Instead they made it worse. If you modify the example here to have a button, in a table cell, centered (align=”center”), it will work fine in IE6 but be broken in IE7. In IE7, the width of the cell will be correct, but it centers it assuming the width of 1, and the text of the button overflows out the right side of the cell.
1 year, 3 months ago
[…] Schau mal hier: Button Width in IE - Revised […]
1 year, 2 months ago
[…] IE stretches your buttons: Actually IE does this on all buttons not only those generated by the <button> tag. Why is this a problem? Well you use the button tag to style it according to your needs, which actually means you will disable the border of the original button and replace it with you images for example. However behind the scenes IE stretches the button proportionally to the enclosed text, only you can’t see the real dimensions any more! You will however see erratic paddings to your neighbour elements and wonder why the hell you cant right-align your buttons with your form. Thank god there’s a workaround. […]
1 year, 1 month ago
http://how-to-spell-ridiculous.com/
1 year, 1 month ago
@jerry: Gold ;)
11 months, 1 week ago
nice solution. It’s work fine under IE6, but I have problems with IE7.
The example page is ok, but I would like to use XHTML doctype definition:
With this definition IE6 renders button and td fine, but IE7 calculate the width of the td wrong.
11 months, 1 week ago
I hope, the doctype definition wil show now:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
11 months ago
The link to this article, from the previous version, has a typo.
it has “with” instead of “width”…
8 months, 3 weeks ago
Anchura de "button" en IE
Un modo de arreglar la anchura por defecto que pone IE cuando se utiliza la etiqueta button
6 months, 3 weeks ago
.button {
overflow:visible;
}
works fine for me in IE7 !
4 months, 3 weeks ago
Great solution ! thanx
it works both ie6 and ie7…and firefox :)
2 months, 2 weeks ago
In my experiment,seems have to change “width:1;” to “width:1px;” …
2 months ago
Awesome! This ia exactly what I was looking for!!
Thanks!