How can we solve the issues related to browser compatiablity in css
Browser Compatiable
Collapse
X
-
Tags: None
-
The solution is simple. Code to web standards supplied by the W3C. Validate your html and CSS to check for errors. Test in the most modern, standards compliant browser (not IE). Chances are your page will then work everywhere with the possible exception of IE. But the bugs and quirks for IE are known as well as the fixes so it's relatively easy to cure. -
Another very common step is to make sure that you are working on a "blank canvas" in all browsers. By default, every browser has its own set of style sheets that dictate a page's behavior. Typically, these defaults deal with the margins and padding of the page's major elements. The problem arises, however, when these defaults are not the same across all broswers. While the differences are not major, they could potentially contribute to a few pixels of spacing inconsitency over the page when opened in different browsers. This gets annnoying quickly!
There are several options to remedy this:
First, you can use a global reset using the following syntax in your CSS file
The * character is a "global selector", so these rules will apply to every HTML element initially, thus creating the "blank canvas" we are looking for...Code:*{ margin:0; padding:0;}
The other option is to link a style sheet to your page to create this same effect...
Check out Yahoo's CSS Reset
This approach is somewhat more specific than simply "zero"ing every element in the HTML.
TomComment
-
"CSS Reset" is originally from Eric Meyer, based on Tantek's "Undoing CSS". The '*' method has fallen out of favor because it doesn't really "reset" everything while Eric's and Tantek's methods do.Comment
-
Check out my User Agents (Graphical Browsers, Textual Browsers & Screen Readers) page.
James
Pickering Pages
Problems serving XHTMLComment
Comment