Search code examples
cssinternet-explorerhtml5boilerplate

html5boilerplate IE conditional not working

Ok, this is the first time I am using html5boilerplate, but cant get the IE styles to work from my css file.

I have this in the header (as per page setting)

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[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]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
    <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>

and in my style sheet I have 

#container { float:right; margin-top: 0px; }

.ie6 #container { margin-top: 5px; }

.ie7 #container { margin-top: 10px; }

.ie8 #container { margin-top: 15px; }

and it doesnt work. Is it really that simple, am I missing something.

Your advice is appreciated.

Solution

  • Unless you're using some javescript shiv, then you should be using what's actually defined:

    html class="no-js lt-ie9 lt-ie8 lt-ie7

    So try,

    #container { float:right; margin-top: 0px; }

.lt-ie7 #container { margin-top: 5px; }

.lt-ie8 #container { margin-top: 10px; }

.lt-ie9 #container { margin-top: 15px; }