Wouldn’t it be nice to be able to address IE in different versions with just a prefix in css, without hacks and multiple stylesheets.

p {color: blue}
.ie6 p {color: red}
.ie7 p {color: green}

This is actualy possible using conditional comments!


<style type="text/css">
p {color: blue}
.ie6 p {color: red}
.ie7 p {color: green; font-weight: bold}

<!--[if lt IE 6]>
<script type="text/javascript">
alert('The version of IE is less than 6');
<div class="ie6">

<!--[if IE 6]>
<div class="ie6">

<!--[if gte IE 7]>
<div class="ie7">

If IE6, then this text is red.<br>
if IE7, then this text is green.<br>
if any other, then this text is blue.
<!--[if IE]></div><![endif]-->

Basically I’m testing for 3 different browser situations

  1. Pre IE6: a warning will be displayed, and a div with class=”ie6″ will be output
  2. IE6: div with class=”ie6″ will be output
  3. IE7: div with class=”ie7″ will be output

The closing </div> tag right before the </body> tag will be displayed for all versions of IE.

Posted Friday, February 13th, 2009 at 1:08 pm
Filed Under Category: Coding, CSS
You can leave a response, or trackback from your own site.


Leave a Reply