« Get rid of the dotted lines on links with image replacement
Image replacement and screenreaders »

Control form button width in IE6

Published 2 years, 5 months ago in CSS, Form Button, Quick Tips, background, border, overflow and padding Digg This

I’m working on a project with shiny, happy submit buttons all over the place. To offer more control over the presentation, we are using the form button element and inserting images inside the button tags.

  1. <form>
  2. …
  3. <button type=“submit” name=“submit” id=“submit”>
  4. <img src=“submit.png” alt=“submit” />
  5. </button>
  6. </form>

Now, you need to over-ride some pretty ugly default presentation styles:

  1. form button {padding:0; margin:0; border:none; background:0;}

This works fine and dandy until you get to IE6. The buttons tend to get really large with IE. So, you need to re-define the width of the buttons and apply overflow:visible. Here’s the entry in your IE6.css file:

  1. form button {width:1%; overflow:visible;}

Resources

Special thanks to Jehiah Czebotar for saving me a bunch of time trying to figure this out.

3 Responses to “Control form button width in IE6”  

Feed for this Entry Trackback Address
  1. 1 Jehiah Apr 26th, 2006 at 8:39 pm

    so what do the shiny/happy buttons look like?

    (and your welcome… i’m glad i was able to solve it!)

  2. 2 Jie Sep 27th, 2007 at 7:04 pm

    thanks dude

    form button {width:1%; overflow:visible;}

    this really helped…

  3. 3 Brian Jun 5th, 2008 at 7:36 am

    cool, thanks. I just found what I needed. Stupid ie6 and their stupid form button default width and padding.

Leave a Reply