Advertisement

There's no such thing as a stupid question, but they're the easiest to answer.
Login
Search

Advertisement

Search Search
Search for:
Tech Support Guy > > >

Solved: Broswer Testing help!


(!)

mwdesign's Avatar
mwdesign mwdesign is offline
Computer Specs
Member with 183 posts.
THREAD STARTER
 
Join Date: Aug 2010
Experience: Intermediate
09-Aug-2012, 04:15 AM #1
Solved: Broswer Testing help!
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___________________

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

Code:
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_____________

HTML Code:
$(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')
                }
        });
});
Attached Thumbnails
Solved: Broswer Testing help!-ie6-navjquery_issue.jpg   Solved: Broswer Testing help!-ie7_nav_moves.jpg   Solved: Broswer Testing help!-ie8-not-fine.jpg   Solved: Broswer Testing help!-ie10-fine-.jpg  
As Seen On

BBC, Reader's Digest, PC Magazine, Today Show, Money Magazine
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.


(clock)
THIS THREAD HAS EXPIRED.
Are you having the same problem? We have volunteers ready to answer your question, but first you'll have to join for free. Need help getting started? Check out our Welcome Guide.

Search Tech Support Guy

Find the solution to your
computer problem!




Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools


WELCOME
You Are Using: Server ID
Trusted Website Back to the Top ↑