I understand completely. Thanks. That's what I usually do throughout my entire site to be honest.
What do you think would be some best practices to get such elements looking somewhat similar across most browsers?
Thanks for the help so far by the way.
The basic ones I've used at the moment are:-
1. Use a reset to set all width and height back to 0 on all inputs and then work from there
2. Set overflow as visible on submit buttons which enables i.e. to respect padding properly
3. I've noticed facebook and twitter really go all out by putting every input inside a div so I'm going to try that
Putting input elements in a div won't have any effect on how a browser displays the element except to force them all to appear on a separate line (unless you use CSS to do otherwise).
Browsers do render buttons and text boxes in different ways, but they're all very much under your control with CSS. The key is to define those elements in your stylesheet to meet your needs so that the browsers don't rely on their default settings. Good luck!
Yep I know but how to actually do that in the css is what I struggle with at times
As far as I can tell in my experience ie6 requires a separate style sheet as it simply differs too much in how it renders compared to more modern browsers. I'm now actually considering going down the route of producing a page which basically say's "upgrade your browser" on all my sites as I think accommodating for ie6 greatly increases development time-scale.
ie7 however seems fixable using most basic techniques however the one I simply cannot get around is the vertical padding which ie7 adds on to submit buttons. If you know of any way of getting submit buttons in ie7 to display practically the same in all browsers without conditional statements etc and no hacks I'd be very impressed
It turns out that input elements present a special case. But this time it's not Internet Explorer. It's Firefox and perhaps some others. The default line-height setting for the input element cannot be overridden in Firefox and perhaps other non-IE browsers. You can generally find an acceptable cross-browser compromise setting for padding, but you can run into limits if your button is not very tall/high.
But overall, you do have a great deal of control over buttons with CSS. Since you say you need to support IE6 (even though its down to low single-digit market share now), you'll have to add a class or id attribute to your input tag. Try the following CSS:
That should get you started. If you run into height issues, you can use conditional statements to add CSS settings for IE to adjust the padding to approximate the appearance of the other browsers. Good luck!