IE CSS hacks

In my web developing adventures, I’ve come across one definite truth – Internet Explorer is a big pain in the ass. Version 7 has come a long way from version 6, but it is still a bit quirky. Seeing as how I write code in a text editor (Coda is my tool of choice), I can plug away all day long writing standards-compliant code knowing that when I go to view it in a a GOOD browser like Safari or Firefox, everything will look the way that I had intended. I also know that when I go to open the page in IE, there’s always going to be some sort of surprise. I have gotten good at re-writing things so that they render similarly in ALL browsers – meaning – you can write code that IE won’t mess up and still get the desired effect in Safari and Firefox – but every once in a while that solution is out of reach. When I hit that roadblock, there are two favorite CSS hacks in my goodie bag…

/* IE6 and below */ * html #myId { }

/* IE7 */ *:first-child+html #myId { }

Both of the hacks above are valid CSS, so no worries with messing up your page validations using these. Important note – always try everything you can to NOT use these first, and make these a last resort. You’ll be a better coder because of it.

November 24, 2007 | Filed Under Browsers, CSS