I tried putting the IE conditional in a CSS file, but that didn't appear to work. Is there a construct for CSS so you can tell it to use this background color if the browser is IE? I also couldn't find anything on if then else conditionals, does it exist? Can someone provide an example.
+12
A:
The IE conditional(s) go in the HTML, and should be used to include an additional CSS file that will overwrite CSS as needed for IE hacks.
Example:
<head>
<style type="text/css">
@import url(/styles.css);
</style>
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
</head>
Chad Birch
2009-02-20 19:04:46
+1
A:
The conditional comments are HTML comments and thus cannot be used in a CSS context.
If you want to aim specific CSS rules just to IE, you have to use CSS hacks.
Gumbo
2009-02-20 19:05:37
+7
A:
I've taken my cue from jQuery and use my conditional formatting to create container elements
<body class="center">
<!--[if IE 5]><div id="ie5" class="ie"><![endif]-->
<!--[if IE 6]><div id="ie6" class="ie"><![endif]-->
<!--[if IE 7]><div id="ie7" class="ie"><![endif]-->
<!--[if IE 8]><div id="ie8" class="ie"><![endif]-->
<div class="site text-left">
</div>
<!--[if IE]></div><![endif]-->
</body>
then I can put the conditional information in css like such
.site { width:500px; }
.ie .site { width:400px; }
#ie5 .site { width:300px; }
bendewey
2009-02-20 19:15:33
I use this trick, myself. It makes your CSS files tidier *and* prevents you from having to worry about selector precendence.
Ben Blank
2009-02-20 20:21:05
Interesting approach, I hadn't seen this before. I personally would rather keep my markup tidy than my CSS. But to each their own!
Mark Hurd
2009-02-20 20:32:47
+1 for the nifty trick.
Ishmael
2009-02-20 20:37:10
@Mark Hurd The additional payload created by this is fairly equivalent to what would be needed if you did other conditional comments. And, if your design didn't need all version num cases you could shrink this code down too.
bendewey
2009-02-20 20:40:41
A:
There's no such conditionals in CSS, but you can use the "Holly hack" if the differences between various versions of IE aren't significant:
div.class { /* whatever */ }
* html div.class { /* IE-only */ }
greyfade
2009-02-20 19:23:43