Not all browsers are created equal, CSS is interpret different ways, what looks perfect in one browser may not look to hot in another. While I do not recommend relying on hacks, but instead developing your code in such a way to not need them. Sometimes there are situations where applying styles to certain browsers is needed.

/*IE 7 and Modern Browsers*/
html>body #header {height: 25px;}

/*Modern Browsers (not IE 7)*/
html>/**/body #header {height: 25px;}

/*Firefox*/
#selector[id= header] {height: 25px;}

/*Hide from IE-Mac*/
/* Hide from IE-Mac \*/
#header {height: 25px;}
/* End hide */

/*IE 5*/
#header {height: 25px; height /**/:/**/ 50px;}
/*Second value will be ignored my IE 5 but not others*/

/*IE 6 and Below*/
* html #header {height: 25px;}
#header {_height: 25px;}

/*IE 7*/
*:first-child+html #header {height: 25px;}

/*Opera 9 and Below*/
html:first-child #header {height: 25px;}

/*Safari*/
html[xmlns*=""] body:last-child #header {height: 25px;}

Know any CSS hacks for browser detection that weren’t mentioned? Please share them!

With CSS3 being rolled out to major browsers it’s time to learn about some of its many features. While IE doesn’t support much (if any) CSS3, Microsoft has announced that it will be supported in IE9. One of my favorite features of CSS3 is the ability to create rounded corners using pure CSS.

In this article I’m going to use images as my examples, so that my friends using Internet Explore will be able to see what they’re missing.

Syntax for border-radius

/*Mozilla*/
-moz-border-radius: /*horizontal and vertical radii*/;
-moz-border-radius-topleft: /*horizontal and vertical radii*/;
-moz-border-radius-topright: /*horizontal and vertical radii*/;
-moz-border-radius-bottomright: /*horizontal and vertical radii*/;
-moz-border-radius-bottomleft: /*horizontal and vertical radii*/;
/*WebKit*/
-webkit-border-radius: /*horizontal and vertical radii*/;
-webkit-border-top-left-radius: /*horizontal and vertical radii*/;
-webkit-border-top-right-radius: /*horizontal and vertical radii*/;
-webkit-border-bottom-right-radius: /*horizontal and vertical radii*/;
-webkit-border-bottom-left-radius: /*horizontal and vertical radii*/;