An Even Better IE Button Width Fix
It's a good thing there are people smarter than me out there. People like Jose Olarte , Martin and Peter who have cleaned up my original solution to long buttons in IE.
As it turns out, I missed that it was the lack of units which caused width:1 to fail.
Anyway, thanks to Jose and Peter: here is the updated fix. It removes the need for conditional comments for IE (which is nice because it makes it easier to integrate into your css file)
input.button {
padding: 0 .25em;
width: 0;
overflow:visible;
}
input.button[class] { /*ie ignores [class]*/
width: auto;
}
2 years, 6 months ago
By the way, I had warned you back on the 5th of March. Check the comments on your original post ;)
2 years, 6 months ago
so you did… I’m glad there are quite a few people out there smarter than me =)
2 years, 6 months ago
And quite a few people not as smart as you- thank you so much for posting a great solution!
2 years, 5 months ago
A very minor issue occurs when padding is set on the button. The visual feedback is gone - the button text no longer moves when the button is depressed.
I do not have a solution for this, however. Setting the padding is useful in IE.
2 years, 3 months ago
Good fix, nice work. I was hoping if you have any ideas on a fix for IE7? :)
This super annoying issue is still in effect for IE7, plus they have fixed the expanding box issue, so when this fix is applied in IE7 the button is actually 1px wide.
2 years ago
Thank you SO MUCH for these IE tricks and tips Jehiah, they have really saved my snaity today.
Cheers for the shares!
1 year, 5 months ago
Hi!
Thanks for this fix, i hate when things look different in FF and IE, and my buttons did’nt even fit on the page without this!! Great work!
1 year, 2 months ago
Hi,
great fix, but like Steve Cochrane already mentioned - the problem is still existing under IE7.
Now yesterday I found a solution that works also in IE7. Unfortunately it’s not a clean CSS solution and it’s not very nice, but it’s the only solution I found so far.
The solution consists of 2 parts:
Put the button in a table without size specification:
Add the CSS attribute “width:100%” to the button, but only for Internet Explorer (Conditional Comments). I recommend also a small padding on the left and on the right like “padding: 0px 10px 0px 10px”.
Of course, this solution needs a lot of additional HTML code. To make it more comfortable, I’ve written a small callback function for ob_start in PHP, that replaces all buttons in IE with the “in-table-notification”.
A similar function I also use in JavaScript functions for generating HTML output.
Both functions do the “in-table-notification” only if Internet Explorer is used.
So I can write my HTML and JavaScript sources in a normal way. The conversion is done directly before output.
I know, this solution is not practicable for everyone, but maybe it’s a little help for some of you.
Just a bad solution for a bad browser…
1 year, 2 months ago
OK, my HTML code was killed, but I think everyone of you know how to write a button inside a table :)
1 year ago
While browser-specific conditionals suck, I came across “No more CSS hacks” at http://www.stylegala.com/articles/no_more_css_hacks.htm few days ago. It makes browser-specific CSS as elegant as it can be! It’s worth taking a look!
1 year ago
Ah… the URL was mauled. Here’s an alternative link that should take you to “No more CSS hacks”… http://tinyurl.com/btvng
9 months, 3 weeks ago
This technique totally fails in IE 5.0. Yeah, it’s very rare, but the button disappears in IE 5.0.
The most safe solution would be using only “overflow: visible;”. It works in IE 5.5 - IE 7 and doesn’t work in IE 5.0. At least — buttons won’t disappear and 99% users (all but IE 5.0) get buttons with normal width.
5 months, 3 weeks ago
I found in IE7 you can simply do:
width:auto;
overflow: visible;
And that seems to work well. Have no way to test how IE5 handles it; everything else seems fine.
3 months ago
8 Andy saved my day, as I was suffering from the expanding table field in IE7. As the button is already inside a table field, there’s no need to add another table.
So, to sum up:
all browsers: padding:0; width:auto; overflow:visible
special IE6 and IE7 hack: width:100%
jehiah, if you have time to check this out, and can confirm that this is the best solution, you could even add a new post …
1 week, 3 days ago
This is still not working in IE7 for me unfortunately. I have two buttons, and all these hacks simply will not render the buttons in the correct size without ruining the table’s width. Here is an example:
Styles:
input[type=button], input[type=submit]
{
background-color: #1A1A1A;
border:1px solid #FFFFFF;
color: #FFFFFF;
font-size:10px;
vertical-align:middle;
padding:0 0.25em;
overflow: visible;
}
.Table1 input[type=button],
.Table1 input[type=submit]
{
width:auto;
}
.Table2 input[type=button],
.Table2 input[type=submit]
{
width:0;
}
.Table3 input[type=button],
.Table3 input[type=submit]
{
width:100%;
}
XHTML code (as I’m unsure if the code will be mangled, replace { and } with < and > respectively):
{div style=”width:450px”}
{table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ class=”Table1″}
{tr}
{td valign=”top” bgcolor=”#00FF00″}{img src=”images/spacer.gif” alt=”" width=”200″ height=”16″ /}{/td}
{td align=”right” valign=”top” bgcolor=”#FF0000″}{input name=”rename”
type=”submit” id=”rename” value=”Rename Category” /} {input
name=”newitem” type=”submit” id=”newitem” value=”Add New Item” /}{/td}
{td width=”32″ align=”right” valign=”top”
style=”background-color:#0000FF”}{img src=”images/spacer.gif” alt=”"
width=”32″ height=”16″ /}{/td}
{/tr}
{/table}
{/div}
Repeat the above three times for each TableN class, replacing the class name in the table itself above.
Style 1 will make the buttons the correct size, but the table will be too wide. Style 2 will make the buttons too narrow, but the table will not be too wide. Style 3 makes the buttons actually 100% wide, but the table will not be too wide.
Anyone have a solution for this?
1 week, 3 days ago
After accidentally modifying the HTML code above, it appears to work now. The above non-working version has two non-breaking spaces separating the two buttons, without any real spaces. However, the modified working version includes at least one real space along with the non-breaking variety. Even though there is a real space separating the two buttons, it doesn’t cause the buttons to wrap.
To reiterate: this appears to be some bug in IE7 will cause the buttons to maintain their former horizontal space beyond their visible width if there is no breaking space.
1 week, 1 day ago
It works nice, but if the button is disabled, it doesn’t work anymore.