www.webdeveloper.com
Results 1 to 1 of 1

Thread: JS menu - works in Firefox 3 but not in IE7

Threaded View

  1. #1
    Join Date
    Jul 2009
    Posts
    4

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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles