Advanced Search

Results 1 to 8 of 8

Thread: Help please, Chrome dropdown menu

  1. #1
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help please, Chrome dropdown menu

    1) Script Title: Chrome menu css

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...rome/index.htm

    3) Describe problem:

    I have set up the chrome dropdown menu on my test website : http://www.level200.co.uk/dropdowntest.asp It works great in Firefox but in Explorer the dropdown menu is over the main nav and not under it, what could the problem be?

    CSS:

    .chromestyle{
    width: 650px;
    font-weight: bold;
    float: right;
    text-align: left;
    background-position: left;
    }

    .chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

    .chromestyle ul{
    background: #5F7284;
    margin: 0;
    text-align: left;
    border-top: 0px none;
    border-right: 0px none;
    border-bottom: 0px none;
    border-left: 0px none;
    }

    .chromestyle ul li{
    display: inline;
    }

    .chromestyle ul li a{
    color: #FFFFFF;
    margin: 0;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 4px 15px;
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: #FFFFFF;
    }

    .chromestyle ul li a:hover{
    background: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #5F7284;
    text-decoration: none;
    padding-right: 15px;
    padding-bottom: 4px;
    padding-left: 15px;
    }

    #chromemenu ul li a[rel]:after{ /*HTML to indicate drop down link*/
    /*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
    }


    /* ######### Style for Drop Down Menu ######### */

    .dropmenudiv{
    position:absolute;
    top: 5px;
    font:bold normal 12px/15px Arial, Helvetica, sans-serif;
    z-index:100;
    width: 150px;
    visibility: hidden;
    filter: progidXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4);
    border-top: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    border-bottom: 0 solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    color: #FFFFFF;
    text-decoration: none;
    }


    .dropmenudiv a{
    width: auto;
    display: block;
    text-indent: 4px;
    border-bottom: 0px solid #FFFFFF;
    padding: 2px 0;
    text-decoration: none;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #5F7284;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-style: normal;
    line-height: 15px;
    font-variant: normal;
    border-top-width: 2px;
    border-right-width: 2px;
    border-left-width: 2px;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    border-top-color: #FFFFFF;
    border-right-color: #5F7284;
    border-left-color: #5F7284;
    text-align: left;
    }

    * html .dropmenudiv a{ /*IE only hack*/
    width: 100%;
    }

    .dropmenudiv a:hover{
    background-color: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #5F7284;
    text-decoration: none;
    border-top: 2px solid #FFFFFF;
    border-right: 2 solid #5F7284;
    border-bottom: 0 solid #FFFFFF;
    border-left: 2 solid #5F7284;
    line-height: 15px;
    font-style: normal;
    font-variant: normal;
    text-align: left;
    text-indent: 4px;
    }

    / css

    Cheers for any help.
    John

  2. #2
    Join Date
    Jan 2007
    Posts
    629
    Thanks
    10
    Thanked 28 Times in 28 Posts

    Default

    Don't have time to really analyze it, but have you considered the padding and margins? FF and IE handle those very differently. IE subtracts the margin whereas FF adds it (so 8px width + 2px margin in IE is 8px, in FF is 10px). (If you got the script from DD, though, that error seems unlikly. . . )
    Very nice template though on your site, by the way
    Last edited by Jas; 12-11-2007 at 06:00 PM.
    --Jas
    function GreatMinds(){ return "Think Like Jas"; }
    I'm gone for a while, but in the meantime: Try using my FTP script | Fight Bot Form Submissions

  3. #3
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the reply Jas

    Unfortunately i'm new to CSS and Chrome menu, could anyone highlight where in the css I need to make the changes please.

    Thanks for any help
    John

  4. #4
    Join Date
    Jan 2007
    Posts
    629
    Thanks
    10
    Thanked 28 Times in 28 Posts

    Default

    EDIT: I can't seem to find the problem. Maybe someone with more CSS knowledge can. I'm sorry. . .
    EDIT2: try adding this to the end of the CSS for me. I want to see what it does (don't get mad if it ruins the template)

    Code:
    div{
    padding: 0px;
    margin:0px;
    }a{
    padding: 0px;
    margin: 0px;
    }
    It won't fix it, but it may tell us if the padding / margin is the problem. The code must be at the end of the CSS file.
    Or better still, get rid of your other CSS sheets and see if it works right without them. If it does, there are some conflicting styles.
    Last edited by Jas; 12-11-2007 at 08:10 PM.
    --Jas
    function GreatMinds(){ return "Think Like Jas"; }
    I'm gone for a while, but in the meantime: Try using my FTP script | Fight Bot Form Submissions

  5. #5
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi Jas

    Thanks for your help, I have added that to the css but it has made no differance at all.

    Its got me baffled... then again, it doesnt take much

    John

  6. #6
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Anyone?

  7. #7
    Join Date
    Dec 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    OK I have now added the css exactly as it appears on teh dynamic drive Chrome menu page and teh dropdown is still displaying above the navigation.

    Whay is this happening?

  8. #8
    Join Date
    Dec 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    What I recommend doing is breaking out your menu to it's own HTML page and testing it there. Only include the needed Chrome elements (js/css).

    If it works fine, then start re-introducing your own Js/CSS files. I've had many times where a css setting used for a site created a collision with something in Chrome Menu (our fault).

    If you still have the issue with breaking it out, re-download the script and pull from the demo.

Bookmarks

Posting Permissions

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