Custom submit button

[TheFilmGod]

<button class="submit" type="submit">Register</button>

 

#info .submit {
background: url(../images/form/but_confirm.png) no-repeat;
border: 0;
color: #ff9600;
font-weight: bold;
font-size: 10px;
padding: 0 0 0 10px;
width: 100px;
height: 22px;
}
#info .submit:hover {
background: url(../images/form/but_confirm2.png) no-repeat;
cursor: pointer;
}

 

Everything works just fine except for "padding". Firefox and Opera have completely different ways of rendering the padding. Opera has 0 as the default, while firefox has 5px 0 0 0 as the default, but doesn't let you make the "5px" a 0. Instead the rendering starts from where firefox started and pushs the text down as you add more padding.

 

Any suggestions on making this work? If I can't make it work, I'll have to use the regular submit buttons... NO!

[ToonMariner]

you can style teh regualr submit buttons too!!!

 

try giving it a border the same color as you rbackground and giving it margin: -1px; see if that gives you any joy

 

[dbrimlow]

I style form buttons all the time.

 

However, they WILL not be 100% consistent across browser/platform-version because form elements have defaults set from both the OS skin and the browser skin.

 

Try adding text-align:center and tweak padding from there.

 

Your issue could also be from something else that is over-riding the padding command. Padding should work.

 

I styled four slightly different form buttons on this page and it holds up on the various browser/platforms I've tested so far:

 

deanluxere.com

 

This is the css for them:

 

.webid1 {background-color:#FFFFFF; color:#333333; border:1px inset #999999; padding: 2px}

.webid2 {background-color:#FFFFFF; color:#CB0708; border:1px outset #999; padding: 1px}

.submit {font:1em Arial, Helvetica, sans-serif;color:#004F75;font-weight:bold;
margin:1em 1em 25px 32%;
background-color:#CCCCCC; border-right: 1px solid #555;border-bottom: 1px solid #555}

.submit2 {font:1em Arial, Helvetica, sans-serif;color:#004F75;font-weight:bold;
margin:1em 0; background-color:#CCCCCC;
border-right: 1px solid #555;border-bottom: 1px solid #555}