Getting Inputs and Buttons To Appear the same in All Browsers

[jimmyoneshot]

Can anyone provide any tips on how to get text inputs, submit buttons etc to appear the same in all browsers?

I have recently been provided the suggestion to put absolutely every input element inside it's own div. Is this a valid solution and are the any better ones?

I'm just looking for ideas really

[cbVision]

The only true guarantee is to convert them to another type of element and style that.

Commonly, you'll see an anchor tag styled as a button, or a UL styled as a select box.

[jimmyoneshot]

I understand completely. Thanks. That's what I usually do throughout my entire site to be honest.

However what I'm trying to do this for at the moment is a login page so I really need to to use actual submit buttons and inputs as I want this page of the site to function with and without javascript, which I assume an a tag styled to look like a button would need to submit a form?

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

Anything else you know of?

[rtrethewey]

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!

[jimmyoneshot]

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

[rtrethewey]

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:

.mySubmit { font-family:'times new roman',serif; font-size:12px; font-weight:bold; margin:2px 0; padding:4px; background-color:lightyellow; border:outset 1px #ccc; }

and

<input type="submit" value="Submit" class="mySubmit">

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!