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.
4 years, 1 month 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.
4 years 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.
4 years 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: [...]
3 years, 11 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. [...]
3 years, 11 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).
3 years, 10 months 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. [...]
3 years, 10 months 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é.
3 years, 5 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.
3 years, 5 months ago
[...] http://jehiah.com/archive/button-width-in-ie-revised [...]
3 years, 4 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.
2 years, 11 months ago
[...] Schau mal hier: Button Width in IE – Revised [...]
2 years, 10 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. [...]
2 years, 10 months ago
http://how-to-spell-ridiculous.com/
2 years, 10 months ago
@jerry: Gold ;)
2 years, 7 months 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.
2 years, 7 months 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”>
2 years, 7 months ago
The link to this article, from the previous version, has a typo.
it has “with” instead of “width”…
2 years, 4 months ago
Anchura de "button" en IE
Un modo de arreglar la anchura por defecto que pone IE cuando se utiliza la etiqueta button
2 years, 3 months ago
.button {
overflow:visible;
}
works fine for me in IE7 !
2 years, 1 month ago
Great solution ! thanx
it works both ie6 and ie7…and firefox :)
1 year, 11 months ago
In my experiment,seems have to change “width:1;” to “width:1px;” …
1 year, 10 months ago
Awesome! This ia exactly what I was looking for!!
Thanks!
1 year, 8 months ago
Yes! thanks, this works in IE6 to eliminate padding added by input text buttons with background images, but it causes flickering of the text in the button during scroll in IE7.
half way there…
1 year, 7 months ago
I got this to work in IE7 and FireFox 3 using width: auto;
1 year, 6 months ago
Hey, You may want to update the link that takes you back to this page at: http://jehiah.cz/archive/button-width-in-ie
1 year, 4 months ago
In HTML 4.01 strict, setting width to 1pt works only in IE6 (or maybe earlier, haven’t tested).
In IE7 you have to set width to 100%.
So my solution is this:
.button { width:0.5pt; }
.button { width:100%; }
1 year, 4 months ago
There are IE conditional comments in the code above, which were filtered out.
Anyway, the first is for IE <= 6 and the second is for IE >= 7.
1 year ago
I didn’t have to use Conditional Comments.
The author’s solution works fine as is in IE6, IE7 and FF3.x
button { width:auto; overflow:visible;}
10 months, 4 weeks ago
[...] One thing that came up while working on this was the fact that there’s a rendering bug in Internet Explorer in regards to showing long buttons. You can read about it at Jehiah.cz, but it’s what’s responsible for some of the width and overflow declarations above. [...]
10 months, 3 weeks ago
[...] Button Width in IE – Revised (tags: html css ie button width) [...]
4 months, 2 weeks ago
starting with microsoft internet explorer 8 none of these fixes are necessary
you can include the statement
<meta http-equiv=”X-UA-Compatible” content=”IE=8″ />
in your html and all buttons should be correct