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. William J. Familia
21st May 2008 at 8:22 pm

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

12. 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…

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

Robert Geiger, agree…In IE7 does not work ideally

Commenting is not available in this weblog entry.

Related articles

Most recent articles

Top articles

© brandnewbox.co.uk 2004-2010