Button Width in IE

posted October 7th 2005 at 2023 EDT in All, CSS, HTML, IE, Web

2/03/06 : Updated version available here to resolve padding problems when in tables

Ever been annoyed with extra padding in a input button in Internet Explorer? I was and I came up with this solution:

First. The problem child:

Long buttons in Internet Explorer seem to gain extra width. It's almost as if they calculate the width based on the wrong font size. Padding doesn't remove it. Margin doesn't remove it. It just is.

The first try to remove margin and padding does nothing.


.button{
   margin:0;
   padding:0;
}
 

The problem is the width; you normaly resolve that with width:auto; but that doesn't help. If you have the luxury of knowing how large you want the button specifying any other size works... for that size.


.button{
   width:auto;
}
 

One way around this is to set a small size; then allow the browser to increase the size by allowing the text to overflow inside the button. This works perfectly in IE but Firefox ignore's the overflow.


.button{
   padding:0 .25em 0 .25em;
   width:1;
   overflow:visible;
}
 

The trick it seems is that IE does the right thing with width:auto; but ONLY when overflow:visible; is set


.button{
   padding:0 .25em 0 .25em;
   width:auto;
   overflow:visible;
}
 

whew

15 Responses

  1. #1 Jason Grunstra
    4 years, 5 months ago

    Nice solution, thanks for sharing. You have one minor typo in the last buttons value attribute, “with” should be “width”.

  2. #2 jehiah
    4 years, 5 months ago

    =)

    so I did. thanks for the feedback Jason.

  3. #3 Vineet
    4 years, 5 months ago

    I did find one oddity though.

    If one puts the button (with the parameters you proposed) in a cell, the cell still expands to approximately the same width as the button would have, if the parameters were not used.

    Have you, perchance, found a workaround for that?

  4. #4 Miss Speller
    4 years, 4 months ago

    Ridiculous.. not rediculous

  5. #5 trimidium
    4 years, 4 months ago

    that got rid of my left and right padding but not top and bottom, i even put height to auto, but no dice… looks fantastic in firefox, but not ie :(

    http://www.thesmartass.info/

  6. #6 laurens
    4 years, 3 months ago

    thanks a million, great to have found you through google!

  7. #7 steve
    4 years, 3 months ago

    fantastic tip – thank god for google :D

  8. #8 Marius
    4 years, 2 months ago

    YOU MADE MY DAY!

  9. #9 guest
    4 years, 2 months ago

    Thanx! You are god!

  10. #10 Johnny Skaaning
    4 years, 2 months ago

    Oh my .. ah .. ah .. ah .. yiiiiiiiiihaaaaaaa! This problem has been an itch of mine for so long :( I’m very grateful you took your time to publish your solution, thanks a lot!

  11. #11 Chris
    4 years, 1 month ago

    Hello,

    This is nice… thank you. I have one question, if the form elements are contained within a table or td the table stretches as if the button was taking up the extra space it used to??

  12. #12 Tim
    4 years, 1 month ago

    Yes, I would also like to find a fix for the extra spacing that is still present when the button is contained in a table cell… as Vineet and Chris mention.

  13. #13 Jay
    4 years, 1 month ago

    Thanks! But, as above, I’m seeing the stretching table issue too, what’s IE trying to do? It can’t seem to relinquish it’s over-sized button area.

  14. #14 Josh
    4 years, 1 month ago

    Thank you! This had been annoying me for quite some time now.

  15. #15 Nicolas
    4 years, 1 month ago

    THE BIGGEST THANKS! this tip help me very much.