by WeaselWarDance

Created on: May 25, 2007   Last Updated: September 11, 2008

One of the best and worst things about the web is the fact that when it comes to your choice of web browser the program you use to access and view the internet - you have multiple options. From the standard Internet Explorer (PC) or Safari (Mac) to open source projects like Firefox to outsiders like Camino and Opera.

The problem is that all of the browsers interpret (X)HTML - the code websites are written from - very differently and all of them have their own internal style sheets and form controls. What this basically means is that a site designed in one browser can look vastly different in others - especially older or non-standards compliant ones like IE6.

There are 3 main ways to deal with browser compatibility issues - having the right tools, designing with web standards, and utilizing conditional statements to feed alternative styles to less compliant browsers.

TOOLS

The first step to dealing with cross browser issues is to design in a compliant browser. In most cases, the best one to start with is Firefox. The simple reason for this is the vast tools it gives a web designer to pinpoint problems and quickly debug code. Two of the best are the Web Developer's Toolbar and Firebug.

The Web Developer's Toolbar gives you the ability to edit CSS on page to test fixes quickly, to outline specific elements, disable cache easily to enable testing (since CSS is cached naturally), and many other useful features outside the scope of this article.

Firebug is one of the best design tools available allowing you to inspect elements on the page, see the cascade of styles applied to that element to narrow down bugs or rendering issues, and even allows you to edit the (X)HTML and CSS on page so that you can quickly test for different scenarios.

Both of these will save you a great amount of time while you are designing your site.

WEB STANDARDS

Web standards is the practice of writing (X)HTML using standards compliant code - basically utilizing correct tags for elements, using CSS for presentation, markup for content, and limiting the amount of markup to the least amount necessary to complete the task and provide enough "hooks" for your CSS. Some of the benefits include improved Search Engine Optimization (SEO) and the ability to re-design your site later on simply by editing the style sheets. The other benefit is the fact that you use CSS for presentation - allowing you to deal with presentational issues relating to browsers easily.

After getting your markup done it's time to style

• 1
• 2
• Next Page >>