Menu not working correctly in IE 8

by psweb
5 replies
Ok heres the problem, on the website I've produced I'm having problems with the navigation... the navigation is based at the top of the page and doesn't seem to work correctly in certain browsers, the menu is what is known as a "garage door" style. All of which should move up when hovered above, although for some reason the last in the navigation doesn't work in certain browsers (this is the contact tab) it mentions that there is a javascript error? If anybody could give me any feedback I'd be grateful.

thanks in advance.

Paul Andrew Southall.


btw the website can be found in my signiture.
#correctly #menu #working
  • Profile picture of the author Karen Blundell
    yes, you're right the contact one doesn't work in IE at all, but is perfect in Firefox 3.5.7...hmmmm...looking at the code now
    Signature
    ---------------
    {{ DiscussionBoard.errors[1658848].message }}
    • Profile picture of the author Karen Blundell
      okay I found it...in your Javascript code you have this
      Code:
      <script type="text/javascript">
              $(document).ready(function() {
      
                  //Set css in Firefox (Required to use the backgroundPosition js)
                  $('#shutter1').css({backgroundPosition: '0px 0px'});
                  $('#shutter2').css({backgroundPosition: '0px 0px'});
                  $('#shutter3').css({backgroundPosition: '0px 0px'});
                  $('#shutter4').css({backgroundPosition: '0px 0px'});
      
                  //Animate the shutter  
                  $(".link").hover(function(){
                        $(this).parent().animate({backgroundPosition: '(0px -100px)'}, 500 );
                      }, function() {
                        $(this).parent().animate({backgroundPosition: '(0px 0px)'}, 500 );
                  }); 
               });
          </script>
      I think you need to add one more line like so
      Code:
      <script type="text/javascript">
              $(document).ready(function() {
      
                  //Set css in Firefox (Required to use the backgroundPosition js)
                  $('#shutter1').css({backgroundPosition: '0px 0px'});
                  $('#shutter2').css({backgroundPosition: '0px 0px'});
                  $('#shutter3').css({backgroundPosition: '0px 0px'});
                  $('#shutter4').css({backgroundPosition: '0px 0px'});
                  $('#shutter5').css({backgroundPosition: '0px 0px'});
      
      
                  //Animate the shutter  
                  $(".link").hover(function(){
                        $(this).parent().animate({backgroundPosition: '(0px -100px)'}, 500 );
                      }, function() {
                        $(this).parent().animate({backgroundPosition: '(0px 0px)'}, 500 );
                  }); 
               });
          </script>
      because the contact link's code calls for it like so:
      Code:
      <li class="shutter" id="shutter5"><a class="link" href="contactform.php">Link 5</a></li>
      Signature
      ---------------
      {{ DiscussionBoard.errors[1658866].message }}
      • Profile picture of the author psweb
        Thank you, that sorted it fairly simple thing I missed there! :-p
        {{ DiscussionBoard.errors[1658920].message }}
        • Profile picture of the author Karen Blundell
          no problem, Paul. I'm glad that I was able to help
          Signature
          ---------------
          {{ DiscussionBoard.errors[1660759].message }}
          • Profile picture of the author basudec1509
            its really solved my problem guys !!!


            lots of thanks to all ....


            i am facing the problem and i was in search of this solution ......



            i am really thankful to both of you guys ......
            {{ DiscussionBoard.errors[1663235].message }}

Trending Topics