Home arrow Style Sheets arrow Cross Browser Issues: CSS Hacks Explained, Tips, Tricks and Fixes

Cross Browser Issues: CSS Hacks Explained, Tips, Tricks and Fixes

Anyone who creates Cascading Style Sheets knows that Internet Explorer is a headache of a browser to build for because of the way it handles CSS. In this article, Jennifer goes into detail about how to deal with some of the most common bugs, and notes which ones may be fixed in IE 7.

Author Info:
By: Jennifer Sullivan Cassidy
Rating: 4 stars4 stars4 stars4 stars4 stars / 50
January 25, 2006
  1. · Cross Browser Issues: CSS Hacks Explained, Tips, Tricks and Fixes
  2. · The Use of JavaScript and CSS
  3. · Hiding CSS from Buggy Browsers
  4. · Workarounds for Internet Explorer
  5. · More Workarounds for Internet Explorer

print this article

Cross Browser Issues: CSS Hacks Explained, Tips, Tricks and Fixes
(Page 1 of 5 )

In the previous article (which you can read here), I covered some cross browser compatibility issues that web developers and designers who use Cascading Style Sheets, or CSS, may run across.  We touched on the differences among the top browsers, and talked briefly about why they do what they do in regards to CSS.  In this article, I want to go a step further, and be specific about particular cross browser hacks and fixes, and to give you a few ways to overcome these particular issues.

I do want to point out that while I can understand the necessity for these workarounds, I always advocate code that is 100% compliant.  When I write CSS, I try to make it as simple as possible, as I have found that the simpler the CSS, the less chance I have of design issues in Internet Explorer.  Sometimes, however, I just can’t achieve the look I want with the simple code.  Hence, I do at times use workarounds.

In this article, you’re going to find that most of these workarounds deal with Internet Explorer, for the reason that we outlined in the first article.  Essentially, IE is a browser that “thinks” it knows what you are trying to tell it, instead of taking the directives in your CSS literally like Mozilla and Netscape based browsers.  If IE doesn’t quite understand something, like sloppy code or unsupported features, it attempts to do something anyway, instead of simply ignoring them, like Mozilla and Netscape based browsers.  Unfortunately, this results in major headaches for CSS developers.  Microsoft has attempted to help “dumb down” coding issues, resulting in more developers that write sloppy code, by having the browser anticipate the design.  There are obvious problems with this concept.  In my humble opinion, CSS code should be written, validated, and 100% compliant with the standards.

However, there are some developers that like to write their CSS code to work (albeit incorrectly) in Internet Explorer, then provide hacks for Mozilla, Opera, Netscape and Firefox browsers.  The reason I don’t like this approach of writing code for IE then implementing workarounds for the other browsers that tend to be more compliant, is that many of these coders will have to go running back to their code to change it once IE decides it’s going to use the CSS the way it was designed: literally.  And trust me, they will eventually; IE 7 is said to have done this much better.  But just for argument’s sake, I will show a few examples of the most common workarounds.

Note: using too many hacks will cause your code to break once IE 7 comes out. It seems that a few of the bugs that some of these hacks relate to have been fixed, as stated on MSDN’s IE Blog.  Even so, there will be a large number of non-compliant or quirky browsers out there that could still use them, as long as you are aware of the risk.  During the writing of this article, Microsoft released a beta version of IE 7.  In the next article, I will cover the CSS standards with which IE 7 is currently compliant. I have also gone back and made a note in each of the workarounds which have been said to be fixed in IE 7. 

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