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 Mozilla/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...

Margin, Padding, and the Box Model

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. If you add up your width/height with your padding, then that will be the true width/height of your element regardless of what browser you are using. And any margin will simply add a buffer to that realized width/height area.

Transparent PNG Images

I love to use transparent and semi-transparent .png images when necessary, but unfortunately IE does not support these images. Instead, IE replaces the transparent areas with harsh blackness. To get around this add the jQuery plugin, jquery.pngFix.js (along with the jQuery core, of course)

Text Overflow

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.

Don't Be Afraid to Float

While the "float" property is not always necessary (and actually abhorred by some developers), 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). Adding the "float" property to an element may inturn require some additional attention to the width of the element and/or require the use of the "clear" property.

Input Text Fields

When styling input text boxes, you will find that Internet Explorer does not treat padding the same as Mozilla or Webkit browsers. While other browsers assume that the text will be centered vertically in a text field, IE does not. When you add top or bottom padding to a text field style, you will likely find this 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 visually consistent. However, I'm sure these only scratch the surface. The main thing I want to encourage is to avoid the *, #, and/or _ hacks. This approach may result in you learning more about CSS than you ever wanted to know, but in the end you will have CSS code that just plain works.