Home/ Questions/Q 7843031
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T16:27:16+00:00

I have a div that isn’t lining up correctly in Chrome, IE and FF.

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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]-->
    • 0