Submit button styling.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Submit button styling.

Post by JellyFish »

Why is it that when you style a submit button in firefox the button looses the text shifting? You probably know what I'm talking about. You probably noticed the content in side a submit button shifting to the button right when you press down on it.

But what I'm wondering is why does this go away in firefox when you style it with css? And why does IE a white pixal border within the set border? E.g:

Image

And I know this isn't a padding issue because the background doesn't render inside this white space and because I set the padding to 0px in my css declarations.

So, how can I toggle having this white border in IE and how could I even put this white space/border in firefox and other browsers? And how do I keep that text shift for firefox?

Thanks for reading.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

I'm too busy to give a lengthy answer now, but in short: styling form controls is difficult to get right cross browser. Why IE puts an extra white border inside I wouldn't know right now. A good article about styling form controls is http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/

If you look at the screenshots he took, there are no two browsers displaying the same thing .. I would just set a nice default look, make sure it functions in all/most browsers and don't worry about pixel-perfect precision between browsers.

Think about it like this: is anyone but you going to turn on two different browsers and compare the button styling of the site?

Sorry that this is not the answer you hoped for, but I hope it's useful anyway.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

You can also use the "image" form control as an alternative to the submit button.

Or you can use a link and javascript to trigger the form submission.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

Maybe I could use jQuery to grab all the submit buttons and replace them with div elements that mimic the characteristics of a regular submit button!

Then turn this into a jPlugin!

Then allow simple css style to the button!!!

:D
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

you may me joking, but that was NSG's solution a few months ago ;-) Search a little and you'll find it :-)
Post Reply