My nav menu won't work on IE < 9 [closed]

StackOverflow https://stackoverflow.com/questions/15989174

Question

My navigation menu isn't working in IE 6, 7 or 8. I'm fine with it not working in IE 6, but unfortunately it needs to work in IE 7 and 8. I am using Ubuntu, so I have been testing using http://netrenderer.com. The nav div is not floating right, and the li elements are not displayed inline. Why is this? Here is the website.

nav ul {
    margin: 0;
    padding: 0;
}

nav a {
    height: 20px;
    width: 27%;
    margin: 0 1.7%;
    margin-bottom: 0;
    padding: 25px 2%;

    text-align: center;
    text-decoration: none;
    font-weight: thin;

    color: #555;

    float: left;
    display: inline-block;
}

nav li:first-child a {
    margin-left: 0;
}

nav li:last-child a {
    margin-right: 0;
}


/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */
nav ul li {
    display: inline;
}




nav {
    display: block;
    float: right;
    width: 38%;
    clear: both;
}
Was it helpful?

Solution

The nav tag is not supported in IE 8 and below, to circumvent this simply include an HTML5 shim that would add support for those tags which are breaking. Try adding this in the <head> section of your page:

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

OTHER TIPS

nav tag is html5 tag not supported in IE7/IE8 Add this in head section before : tag:

<!--[if lt IE 9]>
<script src="https://raw.github.com/h5bp/html5-boilerplate/master/js/vendor/modernizr-2.6.2.min.js"></script>
<![endif]-->

Or

<!--[if lt IE 9]>
  <script src="https://raw.github.com/aFarkas/html5shiv/master/src/html5shiv.js"></script>
<![endif]-->
  1. <nav> tag is not supported in IE8 or earlier.
  2. :first-child is not supported in IE7 or earlier.
  3. :last-child is not supported in IE8 or earlier.
  4. display: inline-block is supported in IE6/7 but has some major bugs.

All of these issues will be breaking your menus.

To fix (1) use html5shiv or Modernizr, or just don't use HTML5 tags in older IEs.

To fix (2) and (3) use Selectivizr or ie9.js.

To fix (4) use an IE-specific CSS hack to force IE6/7 to use display:inline instead.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top