[mwdesign]

Hellloooo,

Ive recently finished a website, and am now testing it cross browser. The site looks and works fine on safari, chrome, firefox, IE 9 + 10, but for some reason on 8 and below my navigation messes up, only some of the hovers work, 7 doesnt even load my page?? and 6 loads the page, but lots of things mess up (Jquery elements dont load and im not sure why).

Jquery is loaded in my header (works in all modern browsers).

Navigation is a sticky header so it uses jQuery

Il post screenshots of the different versions, any help will be very appreciated. Thanks

Navigation Code___________________

 <nav>
   	  <ul id="navlist">
        	<li title="Home" id="nav1" class="bcrumb"><a href="index.html">Home</a></li>
            <li title="Services" id="nav2"><a href="Services.html">Services</a></li>
         	<li title="About Us" id="nav3"><a href="About Us.html">About Us</a></li>
            <li title="News" id="nav4"><a href="News.html">News</a></li>
            <li title="Contact Us" id="nav5"><a href="Contact_Us.html">Contact Us</a></li>
        </ul>

    </nav>

nav {margin: 0 0 0 18px; padding:0; width:925px; position:relative; z-index:40; font-family: "Helvetica", Helvetica, Arial, sans-serif; color:#fff; font-weight:bold; border:none;} 

#navlist ul{ list-style: none; padding: 0 0 0 0; margin:0 ; border-bottom:2px solid #4e4947; height:38px; background:#fff;}

#navlist li {height:38px; width:184px; text-align: left; float: left; padding:0 0 0 0; margin:0;}

#navlist li a {display: block; margin:0; padding: 11px 0px 0px 5px; font-size: 13px; text-decoration: none; width: 180px; color:#4e4947; height:30px;}

.bcrumb {width:180px; height:38px;padding:0 0 0 0; margin:0;}


/* BACKGROUND AND HOVER STATES OF EACH NAV TITLE */

.bcrumb#nav1 {background-color:#ffd70b; border-right:1px dotted #ddd; margin:0; padding:0;}
#nav1{background:url(Images/pixel_icons/home_roll.png)no-repeat right; color:#fff;}


#nav2 {background:url(Images/pixel_icons/spanner.png) no-repeat right; border-right:1px dotted #ddd;}
#nav2:hover {background:url(Images/pixel_icons/spanner_roll.png) no-repeat right #ffd70b; }


#nav3 {background:url(Images/pixel_icons/heart.png) no-repeat right; border-right:1px dotted #ddd;}
#nav3:hover {background:url(Images/pixel_icons/heart_roll.png)no-repeat right #ffd70b;}

#nav4 {background:url(Images/pixel_icons/news.png) no-repeat right; border-right:1px dotted #ddd;}
#nav4:hover {background:url(Images/pixel_icons/news_roll.png)no-repeat right #ffd70b;}

#nav5 {background:url(Images/pixel_icons/contact.png) no-repeat right; border-right:1px dotted #ddd;}
#nav5:hover {background:url(Images/pixel_icons/contact_roll.png)no-repeat right #ffd70b;}

Jquery_____________

$(document).ready(function() {
 
        //Calculate the height of <header>
        //Use outerHeight() instead of height() if have padding
        var aboveHeight = $('header').outerHeight()
	//when scroll
        $(window).scroll(function(){
 
	        //if scrolled down more than the header's height
                if ($(window).scrollTop() > aboveHeight){
 
	        // if yes, add "fixed" class to the <nav>
	        // add padding top to the #content
                //(value is same as the height of the nav)
                $('nav').addClass('fixed').css('top','0').next()
                .css('padding-top','0px')
 
                } else {
 
	        // when scroll up or less than aboveHeight,
                //remove the "fixed" class, and the padding-top
                $('nav').removeClass('fixed').next()
                .css('padding-top','0')
                }
        });
});