1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved: Broswer Testing help!

Discussion in 'Web Design & Development' started by mwdesign, Aug 9, 2012.

Thread Status:
Not open for further replies.
  1. mwdesign

    mwdesign Thread Starter

    Aug 20, 2010

    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___________________

       	  <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>

    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;}
    .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;}


    $(document).ready(function() {
            //Calculate the height of <header>
            //Use outerHeight() instead of height() if have padding
            var aboveHeight = $('header').outerHeight()
    	//when scroll
    	        //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)
                    } else {
    	        // when scroll up or less than aboveHeight,
                    //remove the "fixed" class, and the padding-top

    Attached Files:

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1064424