Cross Browser Issues: CSS Hacks Explained, Tips, Tricks and Fixes
(Page 1 of 5 )
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.
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.
Next: The Use of JavaScript and CSS >>
More Style Sheets Articles
More By Jennifer Sullivan Cassidy
/ 20 
