Page 1 of 1

Submit button styling.

Posted: Tue Mar 13, 2007 1:44 pm
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.

Posted: Wed Mar 14, 2007 2:30 am
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.

Posted: Wed Mar 14, 2007 2:37 pm
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.

Posted: Wed Mar 14, 2007 7:13 pm
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

Posted: Wed Mar 14, 2007 9:57 pm
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 :-)