Home arrow Style Sheets arrow Page 5 - 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 - Another CSS Solution
(Page 5 of 5 )

Another solution to issues 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’ll talk more about this in the next article.  Still, even with the support of both strict mode and quirks mode in these browsers, there are going to be design issues.  Let’s look at a few workarounds and why they work the way they do, but we’ll really delve more into the hacks in the next article.

The first one I want to look at is the “html>body” selector.  This selects any body element that is a child of an HTML element.  The problem though is the child selector will be interpreted correctly in compliant browsers only if there is white space on either side of it (html > body or html> body or html >body), except in IE.

html>body { overflow: visible; } /* show to IE */
body { overflow: auto; } /* show to everyone else */

This is a manifestation of the underscore hack, which allows you to show CSS only to IE and exclude all other browsers.  This comes in very handy when you are needing to give IE a set of separate instructions because something won’t appear correctly if you don’t.

The underscore hack looks like this:
body {
    background: blue; /* show to Mozilla/Safari/Opera */
    _background: red; /* show to IE */

Two things I will point out about this workaround:  one, your CSS won’t validate; and two, it doesn’t work in IE 5 for Mac.  For this case, we have to add another hack, called the Mac Backslash Hack (try saying it three times really fast).  The normal function of this hack is to get IE5/Mac to ignore any CSS rules contained within the hack’s boundaries. This hack works by escaping an end-comment marker using a backslash before the asterisk: \*/.  This hides the end-comment marker for IE5/Mac, and tricks IE5/Mac into thinking anything which follows is still part of the comment. Once another unescaped end-comment marker appears, IE5/Mac resumes application of the remaining CSS rules. All other browsers understand the escaped end-comment as the actual end of the comment, and apply the following rules as if nothing ever stopped them from doing so.

body {
    background: blue; /* show to Mozilla/Safari/Opera */
    _background: red; /* show to IE */
    /* commented backslash hack for IE5-Mac \*/
    background: green;
    /* end hack */

Hacks, as you can see from the example above, can get pretty complicated if you don’t understand the bugs that the browsers have to begin with.  You can find pretty good list of reported CSS bugs for particular browsers either on the browser’s own site or elsewhere on the Internet.  The next article will have many more hacks and workarounds, and hopefully this overview of why CSS sometimes really does behave oddly in certain browsers was helpful to you. 

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials