I have yet to style a site where I've absolutely HAD to use a "css hack" to take care of those dreaded, awful Internet Explorer inconsistencies in how you might expect your specially formulated CSS to format a web page (particularly IE6, but also IE7). In short, I find IE CSS "hacks" to not only be unnecessary, but also a complete nuisance, especially if you have to come back later to adjust your styles. Besides, the word "hack" is such an ugly word, you know deep down that it can't be a best practice.

So, my goal is simply to share some things that I've learned and researched over time that have helped me avoid adding a bunch of asterisks (*), pound signs (#), and/or underscores (_) in my CSS code, or worse yet generate a completely separate set of browser-specific css files to keep up with. A soapbox of sorts? Admittedly so. Something you can use? This is my hope...

I recommend styling your site in Firefox to begin with. This is probably the most standards-compliant of the popular browsers out there. But you might wonder, "Why don't I just style my site in IE6 first? Won't that solve all my problems from the beginning?" I certainly don't think so. Why torture yourself? You're setting yourself up for some serious frustration. Develop in the browser that responds to your css code the way you expect it to. Then spend some time with its spoiled, not-so-intelligent, older step-brother and really spell it out.

Here are some basic hints I have found to be extraordinarily useful...

• When you have any margin inconsistencies between IE and other browsers try adding "display: inline;" to the style in question or replace the margin with padding, if possible
• I love to use transparent .png images when necessary, but unfortunately IE does not support these images and it will add some nasty black space in place of the transparency. To get around this add the jQuery plugin, jquery.pngFix.js (along with the jQuery core, of course)
• For text that may contain a long string (such as a url), you may want to set the encompassing area to "overflow: hidden; word-wrap: break-word;", because it will default to spilling over your specified styled area that the text is contained within.
• While the "float" property is not always necessary, in IE you may need to use it to "fill out" a particular area, especially if it has a specified width and/or height or if margins seem to be ignored. Also make sure to set the "position" property to a value (I've found that setting it to "relative" will cause the container to fill out).

These are a few of the major ways that I've found can be beneficial when trying to make your site cross-browser compatible and consistent. However, I'm sure these only scratch the surface. The main thing I want to encourage is to avoid the *, #, and/or _ hacks. Hopefully I've given you a good base to do so.