We all know that bugfixing Internet Explorer for Windows is a headache. Fortunately there is one easy way to get around most problems.
You can create a conditional statement in your html to import a style sheet just for IE. Basically, what you do is create your main CSS file that styles the site for modern browsers and than you create a separate CSS file to override the statements in the main CSS file just for IE.
This CSS file is only loaded if the detected browser is IE, otherwise it won’t. You should put this conditional statement into the head of your html file after every other CSS import code. It should be the last in the list, so that it overwrites the main css files:
<!--[if IE]> <style type="text/css">@import "IE-override.css";</style> <![endif]-->
Now if for example you had a statement in your main.css file: #logo { margin:10px } and it doesn’t work properly in IE, you can add the same statement with a different value in your IE-override.css file: #logo { margin:20px }.
And this way you will have a 10px margin in Safari and 20px margin in IE. You have full control over IE this way.
The main benefit of this as I see it is that it’s easy to maintain such a structure. For example the next big surprise will hit us when IE7 comes out. With a separate file for IE fixes – the update can be done much easier.
