[thelist] IE adding padding to submit buttons

Lee Kowalkowski lee.kowalkowski at googlemail.com
Wed Jul 29 03:27:01 CDT 2009


2009/7/29 Bill Moseley <moseley at hank.org>:
> http://hank.org/ex/ie_input.html
>
> If you look at that with Firefox/Opera/Safari there's no padding inside
> those red boxes (borders on the <input>).
>
> If you look at this in IE6/7 (didn't test IE8)  then there's "padding", but
> it seems related to how much text there is in the box.
>
> Where's that padding coming from?  And can I get rid of it?  I want to place
> icons next to the text and that spacing makes it look very odd.
>
> Thanks!

It's the width you need to override.  Quick test:

<style>
  .button
  {
    width:auto;
    overflow:visible;
    padding:0 .25em;
  }
</style>

<input type="submit" value="Hello" class="button">
<input type="submit" value="Hello Hello" class="button">
<input type="submit" value="Hello Hello Hello" class="button">
<input type="submit" value="Hello Hello Hello Hello" class="button">
<input type="submit" value="Hello Hello Hello Hello Hello" class="button">
<input type="submit" value="Hello Hello Hello Hello Hello Hello" class="button">

(http://jehiah.cz/archive/button-width-in-ie-revised)

-- 
Lee
www.webdeavour.co.uk



More information about the thelist mailing list