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 7: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. .(JavaScript must be enabled to view this email address)
13th Apr 2006 at 7:59 am

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

3. .(JavaScript must be enabled to view this email address)
13th Apr 2006 at 7:59 am

grr ie, grr.

4. .(JavaScript must be enabled to view this email address)
13th Apr 2006 at 7:59 am

grr ie, grr.

5. Some Guy
13th Apr 2006 at 7: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 7:59 am

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

7. Andreas
13th Apr 2006 at 7: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 7: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 6: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. .(JavaScript must be enabled to view this email address)
3rd Aug 2006 at 7:54 am

Good point, Wilfred.

For reference: Future proof your CSS with conditional comments.

11. .(JavaScript must be enabled to view this email address)
8th Oct 2007 at 5: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 8:22 pm

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

13. Robert Geiger
11th Jul 2008 at 7: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…

14. GamesLab
10th Mar 2009 at 12:45 pm

Robert Geiger, agree…In IE7 does not work ideally

15. .(JavaScript must be enabled to view this email address)
14th Mar 2009 at 12:50 pm

This is amazing! I was looking for this so much time. Tanks man!!!!

16. WomenGames
22nd Mar 2009 at 3:16 am

I’m probably going to start trying to add this functionality myself tomorrow.

17. .(JavaScript must be enabled to view this email address)
30th Jun 2009 at 6:44 am

Smart! Good solution of an irritating problem

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