Cross-Browser CSS

CSS has a way of behaving differently from browser to browser. The three most heavily used browsers here in our health care company are IE6, IE7, and Firefox. Occasionally, browser specific css is required in order to get certain elements to display correctly. Here's an example of a problem I had last week:

#gw_wrap {
left:-160px;
}

* html #gw_wrap { /* IE 6 ONLY*/
left:-180px;
}

html>body #gw_wrap { *left:-20px;}/*IE 7 ONLY*/

The issue I was running into was an element being shifted off of the page by different amounts from browser to browser. As you can see in the example above, the first entry for #gw_wrap was the initial setting. For IE 6 specific css, you can add '* html' prefixed to the element you're targeting. And by adding 'html>body' to the front of the element, and adding an '*' to the CSS attribute, you can target IE 7 specifically. Below are a couple of great resources pertaining to browser-specific CSS.

http://www.evotech.net/blog/2007/05/ie7-only-css-hacks-examples/
http://www.positioniseverything.net/articles/ie7-dehacker.html
http://www.zimmertech.com/tutorials/css/65/target-ie-only-css.php