Internet Explorer在我的网站上做有趣的事情

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 :P this is the address so you can have a look at what its doing in IE 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.

Answer 2

It would help to know what version of IE as well as what "Internet explorer doing funny things with my website" means.

I checked in IE8 and it looked okay. I assume your problem is in IE7.

IE has poor :nth-of-type() support. Although, it looks like you're using Dean Edwards' IE9 to get around this.

Try replacing this:

header nav {
    float:right;
}

With this:

header img {
    float: left;
}