Skip to main content

html - How to make styling and functioning of form elements get not to break in all browsers? -


How to style and work the same elements in all browsers?

  & lt; Form & gt; & Lt; / Form & gt; & Lt; Fieldset & gt; & Lt; / Fieldset & gt; & Lt; Story & gt; & Lt; / Narrative & gt; & Lt; Button & gt; & Lt; / Button & gt; & Lt; Label & gt; & Lt; / Labels & gt; & Lt; Input type = "button" /> & Lt; Input type = "checkbox" /> & Lt; Input type = "file" /> & Lt; Input type = "hidden" /> & Lt; Input type = "picture" /> & Lt; Input type = "password" /> & Lt; Input type = "radio" /> & Lt; Input type = "reset" /> & Lt; Input type = "submit" / & gt; & Lt; Input type = "text" / & gt; & Lt; Gt selection and; & Lt; / Select & gt; & Lt; Options & gt; & Lt; / Options & gt; & Lt; Text area & gt; & Lt; / Text field & gt; & Lt; Optgroup & gt; & Lt; / Optgroup & gt; These form elements are supported in XHTML and HTML.  

My question is not about creating vertical or horizontal form. I am asking, should we write any default CSS for each form element to make it evenly in all browsers.

This is for Eric Meyer Reset form elements:

  Field, form, label, legend {margin: 0; Padding: 0; Border: 0; Profile: 0; Font weight: heir; Font style: heirs; Font-size: 100%; Font-family: heirs; Vertical-line: baseline; }  

YUI CSS reset also adds it:

  Input, Textarea {margin: 0; Padding: 0; }  

Like I found this javascript fix:

Does anybody know other tips?

Things do not have to be uniform in all browsers - the main purpose is not to break things in other browsers There are some things in different browsers that you will not be able to make "equal", whatever happens, and of course the elements are one of those things. The worst file upload button is that it needs to actually customize it to represent it too much tweakery.

First of all, just select the browser you believe will be your users and focus on them. Generally, this will be something like Firefox, IE8 / IE7 / IE6, Chrome, Safari, Opera. Others may be able to ignore you completely if you have an existing site, look at the browser profile of your Google Analytics visitors and just make a cool decision about what you want to support. In some cases, you can cut IE 6 completely, which will make your design life so easy.

Then, what I personally do is that I will design in Firefox, try to write plain code, and be ready once, start watching the design in different browsers (which I have installed on various machines, laptops, etc.)

Hope that helps.

"Similar" is never my purpose, just "functional" and "good looking".


Comments

Popular posts from this blog

oracle - The fastest way to check if some records in a database table? -

php - multilevel menu with multilevel array -

jQuery UI: Datepicker month format -