Conditional CSS for IE Versions

Published in Website Design on Friday, 17 October 2008  |   Subscribe to rss feed for Conditional CSS for IE Versions (rss logo graphic) Post RSS

As any web developer knows, the problems of presenting content to various browsers in a consistent display are manifold.

And just sometimes... this involves writing separate CSS code for the world's favrourite browser...

The following code shows 2 examples of writing conditional CSS for Internet Explorer.  That means IE will read it, but Firefox, Safari et al all ignore it.

It's good practice to put the IE specific CSS after the regular CSS - this way the IE browser overwrites any conflicts.

Targeting Specific Versions of IE

IE's support of CSS rules has been sporadic. That means that IE6, IE7 and IE8 all interpret your CSS significantly differently. And IE6 does  not support PNG images, while 7 and 8 do.

So it's not inconceivable that a professional web developer may want to write different CSS for each version of IE.  Familiar with IE flaws, Microsoft allow us to do this relatively easily.

The first example presents conditional CSS to Internet Explorer browsers (all versions).

The second example presents only to a specific version of Internet Explorer - the version specified in the code <!--[If IE 6]-->

It is recommended that the code is included in the page (as opposed to a separate .CSS file) as code in the regular CSS file prevents it from validating.

Get The Code

<!--[if IE]>
<style type="text/css">
#headerLinks {
padding-top:15px;
padding-right:0px;
}
#adminBar {
margin-bottom:0px;
}
#price {
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/fw-images/bg-price.png', sizingMethod='scale');
_background:transparent;
}
#wfLinks {
bottom:-1px;
}
</style>
<![endif]-->
 
<!--[if IE 6]>
<style type="text/css">
div.smallPrice {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/fw-images/bg-price-100.png', sizingMethod='scale');
background:transparent;
}
</style>
<![endif]-->

All resources written by The WebFertile Team.

Whatever your business needs, one of our highly trained small business development experts is sure to be able to help.