brandnewbox.co.uk

Home of Andrew Weaver, a uk-based web developer specialised in building high-quality websites

Removing padding from IE buttons

Thursday, April 28th, 2005

Andrew Weaver

Category:

Internet Explorer automatically adds padding to buttons in HTML forms.
This space stretches according to the length of the button’s text.


Eg,

IE button sizes

Use the CSS rule:

* html input { overflow: visible; }

to remove the extra padding.

This rule uses the Html Star Hack so only Internet Explorer applies it.

Comments

1. Nick
13th Apr 2006 at 3:59 am

I was actually enthused for a second until I realized all it does is hide the button overflow, the button itself still takes up the same amount of space on the page. =o(

2.
13th Apr 2006 at 3:59 am

... I’ve found that adding width: 1px; is also needed.

3.
13th Apr 2006 at 3:59 am

grr ie, grr.

4.
13th Apr 2006 at 3:59 am

grr ie, grr.

5. Some Guy
13th Apr 2006 at 3:59 am

You can’t do width: 1px cause mozilla will do just that. Your buttons will be 1px wide, not very useful.

6. miha
13th Apr 2006 at 3:59 am

margin:0; padding:0;cursor:pointer;

7. Andreas
13th Apr 2006 at 3:59 am

Thanks. Seems to work fine for me. I've been fighting with this for quite some time.

8. Multidremel
13th Apr 2006 at 3:59 am

For IE and FF:html input { overflow:auto !important; overflow:visible; width:auto !important; width:50px; padding-left:6px; padding-right:6px;}

9. wilfred nas
2nd Aug 2006 at 2:35 pm

just put the ie hack in a seperate script present it only to ie with conditional comments, that will do the trick.

10.
3rd Aug 2006 at 3:54 am

Good point, Wilfred.

For reference: Future proof your CSS with conditional comments.

11.
8th Oct 2007 at 1:35 pm

The more web development I do, the more I realize just how much of a load of crap IE is.

12. William J. Familia
21st May 2008 at 4:22 pm

input.button
{
overflow:visible;
}
html>/**/body input.button
{
overflow:auto;
}

13. Robert Geiger
11th Jul 2008 at 3:15 pm

Yes! thanks, this works in IE6 to eliminate padding added by input text buttons with background images, but it causes flickering of the text in the button during scroll in IE7.

half way there…

Add a comment

 
Remember my personal information
 
Notify me of follow-up comments?
 

Related articles

Most recent articles

Top articles

© brandnewbox.co.uk 2004-2008