Fix CSS <!--[If Lt Ie 8]> in Ie

FIX CSS !--[if lt IE 8] in IE

If you want this to work in IE 8 and below, use

<!--[if lte IE 8]>

lte meaning "Less than or equal".

For more on conditional comments, see e.g. the quirksmode.org page.

What does these tags mean [if IE 8]?

If the user is viewing your site with Internet Explorer 8 (as an example), then your <html lang="en" class="no-js"> becomes <html lang="en" class="ie8 no-js"> (this could also be used to point the user to another stylesheet specifically for IE 8 as well).

It was helpful for when you needed to correct a few things on your site that looked terrible for IE 8.

They're no longer supported since IE 10 though.

Regardless, you can just leave it the way it is.

Apply style ONLY on IE

Update 2017

Depending on the environment, conditional comments have been officially deprecated and removed in IE10+.

Original

The simplest way is probably to use an Internet Explorer conditional comment in your HTML:

<!--[if IE]>
<style>
    .actual-form table {
         width: 100%;
    }
</style>
<![endif]-->

There are numerous hacks (e.g. the underscore hack) you can use that will allow you to target only IE within your stylesheet, but it gets very messy if you want to target all versions of IE on all platforms.

How does one target IE7 and IE8 with valid CSS?

Explicitly Target IE versions without hacks using HTML and CSS

Use this approach if you don't want hacks in your CSS. Add a browser-unique class to the <html> element so you can select based on browser later.

Example

<!doctype html>
<!--[if IE]><![endif]-->
<!--[if lt IE 7 ]> <html lang="en" class="ie6">    <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7">    <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8">    <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9">    <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
    <head></head>
    <body></body>
</html>

Then in your CSS you can very strictly access your target browser.

Example

.ie6 body { 
    border:1px solid red;
}
.ie7 body { 
    border:1px solid blue;
}

For more information check out http://html5boilerplate.com/

Target IE versions with CSS "Hacks"

More to your point, here are the hacks that let you target IE versions.

Use "\9" to target IE8 and below.

Use "*" to target IE7 and below.

Use "_" to target IE6.

Example:

body { 
border:1px solid red; /* standard */
border:1px solid blue\9; /* IE8 and below */
*border:1px solid orange; /* IE7 and below */
_border:1px solid blue; /* IE6 */
}

Update: Target IE10

IE10 does not recognize the conditional statements so you can use this to apply an "ie10" class to the <html> element

<!doctype html>
    <html lang="en">
    <!--[if !IE]><!--><script>if (/*@cc_on!@*/false) {document.documentElement.className+=' ie10';}</script><!--<![endif]-->
        <head></head>
        <body></body>
</html>

HTML IF IE 8 and lower and IF NOT IE 8 and lower

No, your script tags need to be valid html tags and having the curly braces are not valid. Your code should look like this

<!--[if lt IE 9]>
<script type="text/javascript" src="/js/photo_carousel_ie.js"></script>
<![endif]-->
<!--[if gte IE 9]>
<script type="text/javascript" src="/js/photo_carousel.js"></script>
<![endif]-->

You can refer to this question/response for more information:
Need conditional statement to only load script if not IE8 or before and not mobile device

Targeting IE 8 and Below?

Try doing it the HTML5 Boilerplate way. Then just target IE versions by class in JS and CSS.

Replace your opening <html> tag with the following. Adjust to your needs:

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

In JavaScript:

var isIE8 = document.getElementsByClassName('lt-ie9').length;
var isIE7 = document.getElementsByClassName('lt-ie8').length;

if (isIE8) {
  ...
}

if (isIE7) {
  ...
}

Conditional IE8 style in original CSS file?

You can either use a conditional html tag to add a class if the browser if IE and target via specificity, load an ie8 only stylesheet or use a CSS hack \0/ to target IE8 only.

I suggest the head route if you only have a couple one-off issues in IE.

HTML Class Method

In your HEAD

<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

In your CSS

.ie8 #menu ul li {
    display:block;
    width:110px;
    padding:15px 10px 15px 10px;
    text-align:center;
    color:#000;
    text-decoration:none;
    font-weight:bold;
    background:#e5e5c3;
    }

IE8 only stylesheet method

Load AFTER your common shared styles.

<!--[if IE 8]><link href="/css/app-ie8.css" type="text/stylesheet"/> <![endif]-->

IE8 CSS hack

use \0/ directly after selector

#nav li ul  {
  left: -39px\0/ !important;
}

Fix CSS <!--[If Lt Ie 8]> in Ie