Styling the Button Element in IE
If you’ve ever attempted to style a button inside IE, you know that it can be a huge pain. On most of our projects, we’ve now started using the button element in place of traditional input buttons due to the ease of styling and consistency across browsers. One of the first things you might notice when you bring your nicely styled buttons up in IE is that, for reasons unknown to me, IE decides to stack the padding depending on the width of the content inside the element.
After spending some time adding a lot of extraneous CSS to the IE specific style sheets, I realized that two simple lines of code fixes the problem.
button {
width: auto;
overflow: visible;
}
Those two lines of code will save you countless hours. Go give your button elements some extra love.
UPDATE: July 16, 2008 - Please note that this fix DOES NOT work for buttons contained inside table elements.
Thanks for the tip, Rob. I’ve been having some IE issues on my personal blog.
I wonder if there is a CSS snippet that might automatically force IE users to download Firefox or Flock, close and delete IE from their computer, and reopen the page in the new browser? I could see some value in that…
Seriously, I would love that. In the meantime checkout http://savethedevelopers.org.
Rob, bless you for propagating this tip to out into the internets. It’s a quick fix for a maddening problem, and I’m sorry I erased it from its rightful place on the whiteboard.
LOL i love your assertion that IE land and the real world are two different “places.”
It appears that IE still applied top and bottom padding differently than other browsers. Can you find a fix for that? I’ve tried padding, and height: auto;
@Neal - Yeah, IE can still be a bit quirky about the top and bottom padding. It’s usually a couple of pixels off. What I’ll typically do to get around that is declare different top and bottom padding values in the IE specific stylesheet. If you need to have things pixel perfect you can always use image replacement and use an image as your background. Hope that helps!
I had previously thought this was unsolvable. Thanks for sharing. This makes for a good addition to the “reset” part of any stylesheet.
This is an awesome trick. Thanks so much!
A couple weeks ago I found out this also works to fix IE’s padding issues with traditional input buttons.
Just wondering, what cross-browser issues do you guys see with input buttons that are solved by using a button element instead? Or will it be readily apparent once I try it myself?
@Steve - Thanks for the tip on the input buttons! I never thought of trying that but it makes perfect sense.
The main benefit in my opinion to the button element is it’s ability to wrap content and it’s ease of styling. Typically I’ll define a style for all input fields and then end up re/un-styling my buttons, which is a pain. The W3C explains it much better than me.
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to “image”, but the BUTTON element type allows content.
I’m sold. Thanks for cluing me in on what I’d missed!
Quick question: do you know what versions of IE exhibit this bug, and if this fixes all of them?
Thanks for the tip!
{ryan}
@Ryan - I know this problems occurs in both IE6 & 7. I haven’t had a chance to check in the IE8 beta or 5.5. And as far as I know this fix fixes the problem for both IE6 &7;.
Thanks for your interest and comment.
@Ryan: It fixes the bug in IE 5.5, IE 6 and IE 7. IE 8 beta 1 renders the button element properly.
#Rob: Thanks a lot!
Nice trick. I remember that IE don’t send value param for button. Ugly fix is to add onclick="if (check_is_IE) this[removed]=’change’” to button.
That makes perfect sense to use buttons so you dont have to restyle for submit buttons. I’ll definately be using this in the future. :)
Is that ture?I’ll try!and thank you for the good tip!
This is going straight into my CSS reset
Nice trick, thanks for sharing. You guys ever notice that in FF it’ll push the text so it’s towards the bottom? I see it on this site for example. Haven’t found a fix for it. Has anyone else?
I am having an issue in IE with some odd padding appearing on the outside of a button element when displayed inside of a table cell. Thoughts? It appears to be something directly related to the button element.
That certainly does sound weird. Do you have an example?
http://test.baileyfam.mine.nu/button_test.html
Notice the odd margin occuring on the right side of the buttons.
Thank you for this fix; always wanted to get rid of that extra space around the text on submit buttons. Do you know of a fix for IE 5.0 though?
@Mike - Thanks for bringing up this issue. It _looks_ like the width button bug can’t be fixed inside a table. I tried most everything. Very weird indeed. I’ll note that in the post. What did work, however, was setting a static width. That might be your best bet if you’re forced to work inside a table. Just be sure to give your text room to grow in the case of text-resizing. Good luck!
@jez - IE 5… wow… I can’t say I have a good solution. My suggestion would to lovingly nudge your users/clients to upgrade. 5.0 is ancient. :)
Im my tests I’ve found that overflow-visible fixes the problem on its own and wondered why you’ve added width: auto? Also in some versions of IE (can’t remember which) the actual SUBMIT text itself, is not vertically centered inside the styled button—how would I go about fixing this?
@Jez - I would double check your line height. Sometimes it can be inherited which can cause vertical alignment issues.
Fantastic! Thanks Rob. It seems that the incorrect line-height for the submit button text was indeed being inherited from someplace else. Everything’s cool now. By the way love the watercolor look to your site!
As you mentioned the fix does not work in tables, that has been fixed. For IE set the width of button to 1 and the overflow:visible will help the text in the button expand. See: http://jehiah.cz/archive/button-width-in-ie-revised
Next entry: What's the Car Equivalent of a Mac?
Previous entry: Wufoo: UI That Really Cares
Recent Comments
@brad
It makes little difference when using native EE functionality or Structure to add pages, it’s just that if you want to add a sub page, you need to remember to assign a...
- Hambo on 'A Whole New Wooooorld: Structure + ExpressionEngine'.
- brad on 'A Whole New Wooooorld: Structure + ExpressionEngine'.
- Doug Avery on 'A Whole New Wooooorld: Structure + ExpressionEngine'.
Subscribe to Comments RSS