Go Home

Uncle Jim's Web Designs and Tutorials

Site Development Optimization

Writing Cascading Style Sheets
for Cross-Browser Compatability

Author: Jim Stiles



CSS
Valid CSS!
Valid HTML 4.01!


 

Cross Browser Style Sheet Issues:

One of the greatest issues for designers using Cascading Style Sheets is lack of functionality due to cross-browser incompatibility. Nothing ticks off designers more than finally completing their web design, then finding out it looks great in Internet Explorer and Opera, but looks terrible in a Mozilla browser and completely breaks up in Netscape. The biggest mistake a web designer or developer using CSS can make is to design for only one browser. In this article, I will discuss some methods for circumventing these issues.

A good CSS developer tries to keep all major browser formats in mind when trying out new style ideas. To accomplish this, you must become familiar with the individual browsers, understand why they do what they do, and know what CSS versions and levels of compliancy they support. That doesn't necessarily mean you need to know all the wokings and bugs of every single browser, but it is important to understand the differences between them. There are certain principles surrounding each browser that are important to understand before tackling a cross-browser issue in CSS.


Click an icon for more information about each browser

  FireFox msie netscape opera safari galeon konqueror linux freebsd phoenix sunos
 


Understanding Browser Differences:

There are many "minor" browsers, such as Mozilla’s Camino for Mac, Konqueror, and many more that do support CSS 2.1. Mainly because they are based on the technologies of the major browsers. There will always be browsers that do not fully or even partially support CSS 2.1, like text-based Lynx and older browsers and obviously, there wont be any work-arounds for those browsers.

MozillaMozilla and FireFoxFirefox

Mozilla-based browsers, such as FireFox use what is known as the open-source Gecko browser engine, which were the earliest browsers to support CSS fairly well and are, for the most part, standards compliant.

SafariSafari for Mac

Safari is an OS X browser using a variant of Konqueror's KHTML browser engine. Apple supposedly chose to base Safari on KHTML instead of Gecko due to the thin, clean code. This browser behaves roughly in the same manner as Mozilla, after some minor rendering tweaks are made.

OperaOpera

Opera Software makes the Opera browser for many operating systems, including embedded systems, and is renowned as a browser that is multi-platform, quick, small, and standards-compliant. Opera fully supports valid CSS 2.1.

NetscapeNetscape 6 and up

Netscape 6 was the pioneer in browser technology and was the basis for Mozilla browsers. Unfortunately, they also have many more bugs when it comes to CSS. There is a big difference in the way Netscape renders CSS in the later versions than when CSS first became standardized. Initially, Netscape attempted to use their own type of style sheet using JavaScript so they could avoid CSS compliancy altogether which, in my opinion, only pushed them further down the popularity ladder.

M.S.I.E.Internet Explorer 5 and up

There was such a huge improvement in CSS support for Internet Explorer when Microsoft updated IE3 to IE4 that to date, it is still the largest browser upgrade for IE. The newer versions of IE have several known issues, of which many were solved in version 6 for Windows and 5.5 for Mac. Because IE 5 is still one of the most popular browser versions available, much consideration must be made in regard to style sheet compatability.

Unfortunately, IE6 for Windows does have some rendering bugs in regardss to CSS, like doubling the margins for floated elements, duplicating text in multiple floats, and oversizing content boxes to mention a few. Though we can't be responsible for rewriting their browsers for them, we are responsible for understanding what makes these browsers different with regards to CSS compatibility, and what we can do to work around them.


How to Handle the Differences

One thing you can do to help Internet Explorer truly do what you want it to do instead of "figuring it out for you" is to put your web page for IE into quirks mode. Quirks mode is a rendering mode where a browser tries to handle sloppy code in the way that they did a decade ago. In quirks mode, the browser will mirror earlier browser versions and render them exactly the same as they used to.

Quirks Mode

The problem with this is that if you put your page into quirks mode for IE or older browsers, then you’re putting the page into quirks mode for other browsers as well. Therefore, you have to use a trigger that will switch between strict mode and quirks mode depending upon the type of browser that is detected. This is referred to as "doctype switching", which is supported by all modern browsers. According to the standards, any (X)HTML document should have a doctype which informs the browser of the version of (X)HTML the document is using. A doctype normally looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Strict Mode

The other mode that modern browsers recognize is strict mode. Your page does not have to validate according to the chosen doctype; the mere presence of the doctype is enough to trigger strict mode. There is one exception to this rule: in IE 6, if a doctype that triggers strict mode is preceded by an xml prologue, the page displays in quirks mode. It looks like this:

<?xml version="1.0" encoding="iso-8859-1"?>

This was done to allow CSS coders to achieve valid pages which require a doctype, but still wished their pages to render in quirks mode. Older browsers completely ignore this tag as well as doctype switching, and operate in quirks mode no matter what.


Testing your CSS compatability:

The following link is provided for testing your browser for CSS-1 compatability:

CSS-1 Compatability Test


Browser Work-Arounds:

One solution to the issue of cross-browser compatibility would be to create multiple style sheets for multiple browsers, then using a JavaScript code to return the version and type of browser the web visitor is using. I covered this in detail in the Site Design Optimization article. Even with the support of both strict mode and quirks mode in these browsers, there are going to be design compatability issues. That brings us to the next area of this discussion, CSS hacks.


CSS Hacks

What are CSS hacks:

CSS Hacks are small bits of style coding that were made to either effect specific browsers or to ensure specific browsers were not effected by the rest of the style coding.

Why are CSS hacks used:

Due to modern browsers inherent lack of support for CSS standards, a number of techniques have been created in order to hide CSS stylesheets, rules, and declarations from browsers that misunderstand or mis-interpret them. They are also used to set special values to the existing CSS property in different browsers so as to acheive the same appearance on all of the most popular browsers.

What are the dangers of CSS hacks:

Make no mistake, CSS hacks can be very dangerous for your web site. If you use a hack to by-pass one bug and not all of them, then you are just asking for trouble.

Secondly, using hacks completely nullifies the reasons for using CSS standards in the first place, to make coding easier and to have a consistent, compliant code base. Professional designers have fought for this for many years. Using these hacks only sets us back further.




Other Articles and Tutorials by Jim Stiles:

Introduction to Cascading Style Sheets

Website Optimization

Validating Your Website

Securing Your Website

Introduction to Dynamic HTML

Microsoft Office Application Tutorials

Introduction to Computer Maintenance

Computer and Browser Security

Understanding Computer Viruses

Home Network Security

Web Site Security Vulnerabilities

Fighting Email Spammers

Fighting Forum Spammers