CSS conditional Comment not working

Question

I have a div that isn't lining up correctly in Chrome, IE and FF. Chrome needs a padding-left:40px; while IE and FF do not. I've been playing with if for a few hours and I know I'm missing something simple. This is what I've been trying:

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

I've also tried in the normal style.css:

<!--[if !IE]--> 
#lower .expo {padding-left:40px;}
<!-- <![endif]-->

or #lower .expo {width:400px; padding-top:40px; float:left;}

I also tried this:

#lower .expo {width:400px; padding-left:40px; padding-top:40px; float:left;}
<!--[if gt IE 6]> 
#lower .expo {width:400px; padding-top:40px; float:left;}
<!-- <![endif]-->

Interestingly if I do this:

<!--[if gt IE 6]> 
#lower .expo {width:400px; padding-top:40px; float:left;}
<![endif]-->
#lower .expo {width:400px; padding-left:40px; padding-top:40px; float:left;}

IE displays correct but not FF or Chrome. Its driving me crazy. I must be missing something simple but I've been looking at it too long.

Answer 1

Just for the sake of your actual error, it lies in how you are doing the comments. It should be:

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

For a better way than that, here's what I use:

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="ie6"    lang="en"><![endif]-->
<!--[if IE 7]>    <html class="ie7"    lang="en"><![endif]-->
<!--[if IE 8]>    <html class="ie8"    lang="en"><![endif]-->
<!--[if IE 9]>    <html class="ie9"    lang="en"><![endif]-->
<!--[if IE 10]>   <html class="ie10"   lang="en"><![endif]-->
<!--[if !IE]><!--><html class="non-ie" lang="en"><!--<![endif]-->

The benefit of doing it this way is that you get to keep the best practice of only using 1 stylesheet. You simply preface your target with the corresponding IE class you want to hack.

For example: .ie6 #target-id

For a more in depth explanation, check out Paul Irish's article:

Conditional stylesheets vs CSS hacks? Answer: Neither!

UPDATE:

2012.01.17: Here is the current iteration that we have in the HTML5 Boilerplate. We actually tried to reduce it down to just a single .oldIE class for IE ≤8 (to use with safe css hacks), but that didn't fly. Anyway, our current version..
    <html class="">

Answer 2

Try downloading this javascript file. http://firststepdesign.org/browserselect.js Then link it in your html.

<script src="browserselect.js" type="text/javascript"></script>

After that go to your css and use these to select specific css for different browsers.

only internet explorer will detect this.

.ie .example {
  background-color: yellow
}

Only firefox will detect this.

.gecko .example {
  background-color: gray
}

Only Safari and Chrome will detect this.

.webkit .example {
  background-color: black
}

Hope this helps if you need to more comment.

CSS conditional Comment not working

Question

2 answers

solution1
8 ACCPTED 2012-04-26 13:10:22

solution2
1 2012-04-26 13:15:25

CSS conditional Comment not working

Question

2 answers

solution1 8 ACCPTED 2012-04-26 13:10:22

solution2 1 2012-04-26 13:15:25

solution1
8 ACCPTED 2012-04-26 13:10:22

solution2
1 2012-04-26 13:15:25