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.

Code Maverick · Accepted Answer · 2013-12-23 15:52:10Z

8

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="">

edited Dec 23, 2013 at 15:52

answered Apr 26, 2012 at 13:10

Code Maverick

20.5k12 gold badges65 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Muhd Over a year ago

I think your first code block is wrong. It should be <link href="non-ie.css" rel="stylesheet" type="text/css">

Code Maverick Over a year ago

Oh, you meant his error one, gotcha, yea, that was a mistype. Hang on, I'll change it.

Not a discord mod · Accepted Answer · 2012-04-26 13:15:25Z

1

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.

answered Apr 26, 2012 at 13:15

Not a discord mod

4,5959 gold badges31 silver badges50 bronze badges

3 Comments

YMMD Over a year ago

IMHO this solution is not as good as conditional comments, because it requires Javascript to work.

Not a discord mod Over a year ago

This is just a simpler way if the above fails I agree with YMMD.

Muhd Over a year ago

This javascript file is obsolete. It won't properly handle newer versions of firefox, etc. Otherwise it might have value for detecting specific non-IE browsers.

Collectives™ on Stack Overflow

CSS conditional Comment not working

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related