Ie6 and Ie7 XHTML strict input form controls have massive padding

Question

I'm using submit controls in my web page

 <input type="submit" name="BtnSearch" value="Search" id="btnSearch" title="Search" />

Even when I turn off CSS I get a big gap before the start and after the end of the text of my button. My buttons are also bigger than I want. Is there a way to style buttons in IE6 and 7 to make them more compact?

Answer 1

Set overflow to visible:

input {
    overflow: visible;
}

And then set the padding to whatever you want it to be.

Most of the browser-specific styling is done with the border--set border-width to 0 if you want a plain square button.

Answer 2

You could try to style like so:

input [type="submit"] {
    padding: 0;
    border: 0;
}

or simply add a class to your button and add style rules for that class.