Home arrow Style Sheets arrow Page 4 - Cross Browser Issues: CSS Hacks, Understanding Compatibility
STYLE SHEETS

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

Cross Browser Issues: CSS Hacks, Understanding Compatibility - How to Handle Differences
(Page 4 of 5 )

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 in the mid- to late 90's.  In essence, in quirks mode the browser “purposefully imitates the lax parsing, rendering, and bugs in earlier browser versions so that they render the old, quirkily coded pages exactly the same as they used to.”  On the site, css-discuss.incutio.com, you can find a good list of the quirks that are reproduced in which browsers when using quirks rendering 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 looks like this:

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

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.
 

blog comments powered by Disqus
STYLE SHEETS ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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