Conditional statements with IE

[fred2028]

I know I can do

<!--[if IE]>
<style type="text/css">
@import 'iestyle.css';
</style>
<![endif]-->
but does this work within external CSS (.css) files? I have to format bulleted lists a certain way so that they show in IE, however in other browsers they work fine. Thanks!

[Medyman]

No, that won't work within external files.

But there are CSS hacks for IE only. One that I've used is the underscore hack. If you precede any CSS property name with an underscore, it'll only be parsed by IE. Using the power of cascading style sheets, if you place that style below the regular styles, it'll change IE to whatever you need.

For example:

body {
background:green; // Set background to green
_background:red; // Change IE background to green
}

I don't know if that works of IE8 or not. But you shouldn't need to hack for IE8.

If you're trying to target a specific version of IE, there are CSS hacks for that too. Just Google around.

[fred2028]

No, that won't work within external files.

But there are CSS hacks for IE only. One that I've used is the underscore hack. If you precede any CSS property name with an underscore, it'll only be parsed by IE. Using the power of cascading style sheets, if you place that style below the regular styles, it'll change IE to whatever you need.

For example:

body {
background:green; // Set background to green
_background:red; // Change IE background to green
}

I don't know if that works of IE8 or not. But you shouldn't need to hack for IE8.

If you're trying to target a specific version of IE, there are CSS hacks for that too. Just Google around.
Thanks, I just need to target IE 6+. I'll give the _ a shot.

Edit: Doesn't seem to work ... I have

ul { /* For IE, stupid Ollie likes to hide lists in DIVs */
_margin-left: 20px;
}
and Firefox/Chrome still pick it up.

[Snookerman]

That should not work in Fx or Chrome so I'm guessing you have set the left margin to 20px somewhere else. Try this:

ul {
margin-left: 0!important;
_margin-left: 20px;
}

Good luck!

[molendijk]

Using this:

<!--[if IE]>
<h1>You are using Internet Explorer</h1>
<![endif]-->

<!--[if IE 5]>
<h1>Version 5</h1>
<![endif]-->

<!--[if IE 5.0]>
<h1>Version 5.0</h1>
<![endif]-->

<!--[if IE 5.5]>
<h1>Version 5.5</h1>
<![endif]-->

<!--[if IE 6]>
<h1>Version 6</h1>
<![endif]-->

<!--[if IE 7]>
<h1>Version 7</h1>
<![endif]-->

<!--[if !IE]><!-->
<h1>You are NOT using Internet Explorer</h1>
<!--<![endif]-->

<!--[if IE 6]><!-->
<h1>You are using EITHER Internet Explorer version 6<br />
OR a non-IE browser</h1>
<!--<![endif]-->

<!--[if lt IE 7]>
<![if gte IE 5.5]>
<h1>If IE>=5.5. and IE<7</h1>
<![endif]>
<![endif]-->

etc.

you can separate the css that you want for different IE-browsers from the css that you want for non-IE.

So:


<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->

<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="non_ie.css">
<!--<![endif]-->

etc.

This dispenses you from using hacks, which are always hazardous.
===
Arie Molendijk

[Medyman]

As has been mentioned, the order is important. Anything that you want to be IE specific should appear AFTER the styles for every browser.

I know I showed you a hack, but Arie's suggestion really is the way to go. You should just put the IE-specific styles in a separate external CSS file and include it within conditional statements.