Margins surrounding button text

[rjsquire]

Happy new year All:

I'm trying to create a css class that will eliminate the space before and after the text on an html button.

here is my css:

  <style type="text/css">
   <!--
   .smallButton {
       margin: 0px;
       padding: 0px;
       text-align: left;
       text-indent: 0px;
       width: auto;
       height: auto;
   }
   -->
   </style>

and here is my button:

  <input name="Submit" type="submit" class="smallButton" value="Print Checks">

The text-align parameter is just there because i wanted to prove to myself that i was actually able to change the appearance of the button. I am able to change the alignment but not the margin / padding surrounding the text.
Any suggestions?

Thanks:

Rob

[BonRouge]

button { height:1.5em; width:3em;}

<button>Hello</button>

[rjsquire]

Thanks BonRouge:

That does change the width but not exactly in the way that i want. In mozilla my buttons look fine but in IE I get buttons with spacing before and after the text that appears somehow proportional to the length of the caption string. What i'm trying to do is to minimize the button size by eliminating that spacing.

Thanks.

[Paul O'B]

Hi,

I think the only way to do it in IE is with width as Bon Rouge suggested

Form controls are notoriously difficult to style and the properties allowed for styling vary between browsers also. (But if you find a way then let us know )

Paul

[rjsquire]

Thanks guys:
It turns out that i did find a way. I simply abondoned the buttons all together and just used image fields. Of course this raises a new set of problems in the processing on the server side but such is life.

Rob