Home arrow Style Sheets arrow Cross Browser Issues: CSS Hacks, Understanding Compatibility

Cross Browser Issues: CSS Hacks, Understanding Compatibility

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.

Author Info:
By: Jennifer Sullivan Cassidy
Rating: 4 stars4 stars4 stars4 stars4 stars / 53
January 03, 2006
  1. · Cross Browser Issues: CSS Hacks, Understanding Compatibility
  2. · Know the Browsers
  3. · Know More Browsers, and Differences
  4. · How to Handle Differences
  5. · Another CSS Solution

print this article

Cross Browser Issues: CSS Hacks, Understanding Compatibility
(Page 1 of 5 )

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.

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials