1

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.

Improve this question

2 Answers 2

Reset to default
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..

<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7"><![endif]--> <!--[if IE 7]><html class="lt-ie9 lt-ie8"><![endif]--> <!--[if IE 8]><html class="lt-ie9"><![endif]--> <!--[if gt IE 8]><!--><html class=""><!--<![endif]-->
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I think your first code block is wrong. It should be <!--[if !IE ]><!--><link href="non-ie.css" rel="stylesheet" type="text/css"><!--<![endif]-->
Oh, you meant his error one, gotcha, yea, that was a mistype. Hang on, I'll change it.
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.

Improve this answer

3 Comments

IMHO this solution is not as good as conditional comments, because it requires Javascript to work.
This is just a simpler way if the above fails I agree with YMMD.
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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.