Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question JS menu - works in Firefox 3 but not in IE7

    Hi there - I hope someone can help me - I have the following page with a JS menu in it from dynamicdrive.com:

    http://jemmakidd.com/products.php

    The menu in the link above works perfectly in Firefox but in IE7 there is what looks like a missing image on the right of each top menu item - I have attached a screenshot to show what I mean...the 'sub-menu' items are also aligned right in IE whereas in Firefox they are correctly aligned left...

    Here is my css:

    Code:
    .jquerycssmenu{
    font: bold 12px Cordoba;
    border-bottom: 0px solid black;
    padding-left: 15px; /*offset of tabs relative to browser left edge*/
    }
    
    .jquerycssmenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    
    /*Top level list items*/
    .jquerycssmenu ul li{
    position: relative;
    display: inline;
    float: left;
    }
    
    /*Top level menu link items style*/
    .jquerycssmenu ul li a{
    display: block;
    background: transparent url(glossy_back220x23.gif) top center repeat-x;; /*background of tabs (default state)*/
    padding: 5px 7px 4px 7px;
    margin-right: 3px; /*spacing between tabs*/
    border: 0px solid #778;
    border-bottom-width: 0;
    color: #D2005A;
    text-decoration: none;
    }
    
    .jquerycssmenu ul li a:hover{
    background-image: transparent url(glossy_back2.gif); /*tab link background during hover state*/
    }
    	
    /*1st sub level menu*/
    .jquerycssmenu ul li ul{
    position: absolute;
    left: 0;
    display: block;
    visibility: hidden;
    border-top: 0px solid black;
    }
    
    /*Sub level menu list items (undo style from Top level List Items)*/
    .jquerycssmenu ul li ul li{
    display: list-item;
    float: none;
    }
    
    /*All subsequent sub menu levels vertical offset after 1st level sub menu */
    .jquerycssmenu ul li ul li ul{
    top: 0;
    }
    
    /* Sub level menu links style */
    .jquerycssmenu ul li ul li a{
    font: normal 13px Verdana;
    width: 135px; /*width of sub menus*/
    background: transparent url(glossy_back2.gif) repeat-x bottom left;
    color: #D2005A;
    padding: 4px 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 0px solid black;
    }
    
    .jquerycssmenu ul li ul li a:hover{ /*sub menus hover style*/
    color: #D2005A;
    }
    
    /* ######### CSS classes applied to down and right arrow images  ######### */
    
    .downarrowclass{
    position: absolute;
    top: 7px;
    right: 5px;
    }
    
    .rightarrowclass{
    position: absolute;
    top: 5px;
    right: 5px;
    }
    Here is the link to the js menu code I used:

    http://www.dynamicdrive.com/style/cs...rizontal_blue/

    I hope that is as much info as someone needs to help me - many thanks in advance...

    Andrew
    Attached Thumbnails Attached Thumbnails JS menu - works in Firefox 3 but not in IE7-js_menu_ie_problem.jpg  

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Posts
    301
    Thanks
    2
    Thanked 30 Times in 30 Posts
    See no one answered you, yet. It simply appears that FF is letting missing graphics go more gracefully than IE, which presents those 'x-boxes'. The little graphics aren't where they are supposed to be.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •