CSS buttons using background image not showing right

[richrock]

I've got a background image for all my input submits, and these have all had the same class applied to them, but I still have a problem I cannot get my head around 

 

Here's the css bit:

.button_new {
    color: #FFFFFF;
    background-image: url('images/button-gradient.png') !important;
    background-position:left center;
    background-repeat: repeat-x;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-transform:uppercase;
    padding:1px 3px 1px 3px;
    min-height:17px;
}

 

The background image displays fine, it all works, apart from one thing:  FF, IE7 and IE8 all show different sized buttons.  My problem is, is that the buttons have varying text in them, eg Submit, Reset Search, Go, Back, Back to Listing etc.  It seems to ignore my padding rules, and setting a margin makes no difference either...

 

I found this rather useful link showing the differences between browser buttons, and BEFORE any styles are applied, there are differences.  Even between IE versions.  http://www.designdetector.com/demos/buttons-padding-demo.html

 

So does anyone have any ideas about getting the buttons to look the same across all browsers?  It's worth noting in my code that min-height actually seems to fix IE8's button heigh issues I had, but I don't want to spend another day trying to push a few px to make things look pretty....    I have also used a global reset to zero off the extra paddings/margins that each browser decides is necessary, so I am working from the ground up with any elements on the page. 

 

If possible I'd like to do this without conditional comments - I've managed many other things without resorting to that method and would like to keep my clean streak   I've included screenshots of the offending buttons to see my issue.

 

[attachment deleted by admin]

[otuatail]

The size of the button will depend on the text. The longer the text the longer the button.

You could create an image of a fixed size and put difrent text on each one. This way you can make fancy buttons.

 

Desmond.

 

[richrock]

But looking at my screenshots you can see the same text, different sized buttons, I just want to correct that as the image background is set to repeat on the x axis depending on text length...

[richrock]

And for what it's worth, this may well seem impossible :  :'(

 

I checked out http://jehiah.cz/sandbox/button.html and if you look closely, you can see that the buttons in the 'fixed' version are still a few px out either end...  Unless I change for fixed images, this ain't gonna happen I reckon.    I need a button to be an exact size in one place for all browsers based on the text being 'Search'...

 

Took a screenshot of IE & FF side by side so you can see...

 

[attachment deleted by admin]

[lostprophetpunk]

Specify a width for the image, as it will just take however long the text is for the width resulting in different lengths of the buttons.

[sticks464]

You must remove browser defaults pertaining to margins and padding, and each browser is different. You can use Eric Meyer's css reset or try with

* {
margin: 0;
padding: 0;
}

 

[richrock]

As mentioned in my OP - "I have also used a global reset to zero off the extra paddings/margins that each browser decides is necessary, so I am working from the ground up with any elements on the page. "  I have used the global reset for a number of sites, but it makes no difference. 

 

Further research shows that even Google's buttons render in differing sizes depending on browser.  Argh!  I'll try the size thing, but I think I'm running out of options.

[saltedm8]

If I were you, if its that much of an issue, I would make it an image ( with the text on the image ), that way you are not dealing with margins or paddings.. not ideal I know, but it will bring the results you want as its not any text you would want picked up by search engines anyway.