Thank god for Internet Explorer 8! I can now plug my designs into XHTML/CSS while testing only in firefox and then test in Internet Explorer and my design is rendered about 95% the same. No more "overflow: hidden" or "position: relative" just to make things show up correctly and display padding in margins like all other browsers.
This is great and makes me very excited about the future of browser compliance but the fact of the matter is that many users are slow to upgrade their browser keeping the ominous dark cloud over the Web designer's head.
Fortunately we can remove a little of that dark cloud by targeting the individual versions of Internet Explorer and add CSS that can fix the broken styles in these browsers. For those of you that may not have heard of them before they are called Conditional Comments. These Conditional Comments can be added to the head tag of your document to target specific versions of IE and link to external stylesheets with fixes for that version of the browser.
If I would like to target IE7 for example:
<!--[if IE 7]>
<link href="IE7.css" rel="IE7.css" type="text/css" />
<![endif]-->
This would target only versions of IE7. You can also target a version and all vesions below it. For example if you would like to target IE7 as well as IE6, IE5 and so on:
<!--[if lte IE 7]>
<link href="IE.css" rel="IE.css" type="text/css" />
<![endif]-->
In order for this technique to work properly the Conditional Comments must be placed below the links to your other external stylesheets.
So there you have it. Until we can get everyone to stop using IE5, 6, and 7 we can at least make it a little easier on ourselves to fix the CSS issues between the differing versions.