Any serious CSS person has hacked their way through more ‘Internet Exploder’ issues than they care to talk about. Even if there are only a few small issues to fix in an area, it can be difficult to track them through multiple style sheets (ie. conditional sheet for IE6 & 7). Hacks are just bad practice, so what can you do? There is a better way! I came up with a neat little piece of code that has greatly simplified my life when dealing with cross-browser compatibility.
If you add a unique identifier for the IE browser that is giving you trouble, then just add the ID your CSS in order to control it with ease. Here is what you do:
Copy the following code and insert it just below the opening body tag of your template:
<!--[if IE]> <div id="ie"> <![endif]--> <!--[if IE 6]> <div id="ie6"> <![endif]--> <!--[if IE 7]> <div id="ie7"> <![endif]--> <!--[if IE 8]> <div id="ie8"> <![endif]-->
Paste the next bit of code right above the ending body tag:
<!--[if IE 6]> </div> <![endif] //--> <!--[if IE 7]> </div> <![endif] //--> <!--[if IE 8]> </div> <![endif] //--> <!--[if IE]> </div> <![endif]-->
If you have a box displaying at different heights in Firefox and IE6, write your CSS like this:
.sizebox {height:30px;}
#ie6 .sizebox {height:28px;}
It is MUCH faster and easier to see what is happening with the template when you are reviewing your code to make changes. It’s better than reviewing several different style sheets to find what has been created. You will still need a separate style sheet for IE6 and IE7 so you can store the CSS that doesn’t validate. (You may need it to pound IE into shape!) I personally don’t support IE5 or 5.5, but if you support it just add those to it and you can single it out. 90% of the fixes can be done with this custom code. It’s helped me a lot and I’m sure it will help you too!
