Cross Browser Issues: CSS Hacks, Understanding Compatibility

(Page 1 of 5 )

One of the greatest problems with CSS, or Cascading Style Sheets, is the issue of cross browser compatibility. What may look great in Mozilla browsers looks terrible in Internet Explorer, and may totally break in Netscape. The biggest mistake a web designer or developer using CSS can make is to design for only one browser, or to assume that since the largest group of viewers use IE, to disregard its flaws that are apparent in other browsers.

This article and the next in this series will cover a few of the cross browser issues in CSS, why the code acts the way it does, and how you can either fix it, or avoid it altogether.  But before we jump right into the CSS hacks and fixes, I want to explore a cornerstone in the foundation of good CSS programming: understanding browser compatibility.

The World Wide Web Consortium, or the W3C, has published two main CSS recommendations of style sheets - CSS 1.0 and CSS 2.1. CSS 1.0 became a recommendation in 1996, and CSS 2.1 became a recommendation in 1998.  In this article, I am only going to refer to issues created by CSS 2.1, and the browsers that support it.  CSS 3.0 is currently under development.

Knowing your Arena

A good CSS developer tries to keep all browser formats in mind when trying out new ideas in CSS.  The first step to be able to do this is to become familiar with the individual browsers, and know why they do what they do, and what CSS versions and levels of compliancy they support.  It’s not critical to you that you know all the ins and outs of every browser or the bugs of each one, but it is important to understand the vast majority of differences among them.

There are certain principles surrounding each browser that are important to understand before tackling a cross-browser issue in CSS.  The browsers I will be covering are Mozilla and Firefox, Netscape 6+, Safari, Opera, and Internet Explorer 5+ for Windows and Mac.  The reason I am not going to talk about older browsers is the sheer fact that they’ve been covered so thoroughly all over the Internet, and I really didn’t want to beat a dead horse, so to speak.

Next: Know the Browsers >>
 

More Style Sheets Articles
More By Jennifer Sullivan Cassidy

Comments On: Cross Browser Issues: CSS Hacks, Understanding Compatibility

· Thanks for the heads up! Even though I have been developing for a while, for some...    · This article has several major flaws. #1 - The claim that special care should...    · The easiest way to handle CSS bugs in IE is with separate stylesheet.    · I might point out that what it says is that it is something you could do. Honestly,...    · Oh, and by the way: the link you posted says that their information is outdated...   >>> Post your comment now!