Question

Just wondering if someone can help me figure out why my menu is doing this in IE but none of the other browsers…

This is the code I have in my css sheet.. I’m not up to speed with css/html so I have no idea whats going on here.. any help would be greatly appreciated.

/*===== header =====*/
header nav {
    float:right;
}
        header nav ul li {
            float:left;
        }
            header nav ul li a {
                font-size:22px;
                color:#fff;
                height:67px;
                line-height:67px;
                text-decoration:none;
                width:101px;
                text-align:center;
                float:left;
                background:#433b8f;
                background-image: gradient(top, #383282, #484095); /* FF3.6 */
                background-image: -moz-linear-gradient(top, #383282, #484095); /* FF3.6 */
                background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #383282),color-stop(1, #484095)); /* Saf4+, Chrome */
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282', EndColorStr='#484095'); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282', EndColorStr='#484095')"; /* IE8 */
        }
        header nav ul li a.current, header nav ul li a:hover {
            padding-bottom:5px;
        }

        header nav ul li:nth-of-type(2) a {
            background:#0184cd;
            background-image: -moz-linear-gradient(top, #017bc8, #018ed3); /* FF3.6 */
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #017bc8),color-stop(1, #018ed3)); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3'); /* IE6,IE7 */
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3')"; /* IE8 */
        }
        header nav ul li:nth-of-type(3) a {
            background:#7cbc19;
            background-image: -moz-linear-gradient(top, #73b515, #86c31d); /* FF3.6 */
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #73b515),color-stop(1, #86c31d)); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d'); /* IE6,IE7 */
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d')"; /* IE8 */
        }
        header nav ul li:nth-of-type(4) a {
            background:#ffbc00;
            background-image: -moz-linear-gradient(top, #ffb500, #ffc300); /* FF3.6 */
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ffb500),color-stop(1, #ffc300)); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffb500', EndColorStr='#ffc300'); /* IE6,IE7 */
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffb500', EndColorStr='#ffc300')"; /* IE8 */
        }
        header nav ul li:nth-of-type(5) a {
            background:#f07502;
            background-image: -moz-linear-gradient(top, #ee6c01, #f27f02); /* FF3.6 */
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ee6c01),color-stop(1, #f27f02)); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee6c01', EndColorStr='#f27f02'); /* IE6,IE7 */
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee6c01', EndColorStr='#f27f02')"; /* IE8 */
        }
        header nav ul li:nth-of-type(6) a {
            background:#d00110;
            background-image: -moz-linear-gradient(top, #d00110, #da0116); /* FF3.6 */
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #d00110),color-stop(1, #da0116)); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#d00110', EndColorStr='#da0116'); /* IE6,IE7 */
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#d00110', EndColorStr='#da0116')"; /* IE8 */
        }

This is how I am setting the menu up in the page

<!-- header -->
  <header>
    <div class="container">
    <img src="images/logo.jpg" WIDTH="500" HEIGHT="60" alt="Smith Screenprint">
      <nav>
        <ul>
          <li><a href="index.html" class="current">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contacts.html">Contact</a></li>
          <li><a href="sitemap.html">Sitemap</a></li>
        </ul>
      </nav>
    </div>
    </header>

its a website I’m developing for my mum 😛 this is the address so you can have a look at what its doing in IE
http://www.smithscreenprint.co.nz

Answer 1

I’m going to go out on a limb here and assume that your problem is that your menu items are not receiving any background in IE versions 6, 7, and 8. This is because the :nth-of-type() selector is not supported in these browsers (only in IE9) and thus those entire rules are being ignored by those browsers. You’re trying to apply background rules for older browsers that can’t read the selector they’re under.

If you really need backwards compatibility in IE, you’re going to have to go the old-fashioned way and specify id="menu-one", id="menu-two", and so on (or something similar) for your menu items.