Resetting styles for coping with cross browsing differences

by David Alfaro 3. October 2008 08:42

What are we facing?

The war of browsers is a never ending story. With Chrome as a new player in the browsing scene, how do you get sure your website is consistently rendered across multiple browsers? How do I get there?

The Solution

This topic is hot and the cornerstone of having a site accessible. The Central Office of Information of UK will tell you that “conforming to web standards such as XHTML and CSS are more likely to work well across a wide range of browsers”. So obviously, moving your site to web standards will take you on the right path. However, as Rick Strahl states: “even with XHTML there are still major differences between different browsers and how they set their default settings for various CSS tags.”

Oops, and now? Given such lack of communication/definition of standards between browsers in that level, a nifty workaround exists: Browser reset. As Rick Strahl again clearly explains, “A browser reset is meant to reset the browser’s CSS setting to a common default value set. Basically each browser has slightly different base settings mostly for margins, padding, borders etc. as well as many other settings that can affect browser rendering slightly and often results in the little inconsistencies […]. The reset effectively is used to reset the browser to a common baseline, upon which any further CSS settings are based.” 

Brilliant!

Just adding this line (assuming you already have the reset.css file):

<link rel="stylesheet" type="text/css" href="reset.css" />

And now you are able built style upon that resetting, and voila! it will rendered consistently on all browsers.

Where do I find a reset file? You will find some interesting options:

Some external references

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags:

css | standards | accessibility

Comments

Add comment


(Will show your Gravatar icon)  

  Country flag

biuquote
  • Comment
  • Preview
Loading



About Aggiorno KC

Aggiorno RSS Feeds As Web developers, we are always hunting for pieces of wisdom spread all over the Web, by friends, by books, or both. Normally it requires time and effort to search and locate that wisdom and then even more to implement it. Knowledge Capsules provide you with a consolidated place to find all the specific pieces of code and advice you are commonly looking for, all provided by fellow Web developers.

IE8 Compatibility Wizard

Automatically upgrades your website to render correctly in IE8!

Internet Explorer 8 Compatibility Wizard

Get it today!


ArtinSoft Corporation ArtinSoft is Microsoft Certified Partner ISV/Software Solutions and Microsft Visual Studio Partner

With over fifteen years of experience, ArtinSoft has proven to be a key player in software evolution, by allowing customers from all over the world to ensure business continuity and compliance through software migration solutions and developer tools created upon principles of artificial intelligence. At present time, ArtinSoft Corporation remains a private firm in constant growth through a strategic partner network. Read More...