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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Drop Down IE6 Issue

    Hello, I was wondering if anyone could help me. It seems my drop down menus don't work in IE6. They do work in IE7,8,Firefox and Safari. Can anyone tell me why? The website is: https://dr4lnb.4lnb.com and the code is:
    [CODE]

    /*Top Navigation Drop Down Menu */
    #globalNav {color:#666;margin:0;padding:0;width:800px; }

    /* remove all the bullets, borders and padding from the default list styling */
    #globalNav ul {padding:0;margin:0;list-style-type:none;display: inline;}
    #globalNav ul ul {width:149px;background-color: #fff;color:#666;display: inline;}
    /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
    #globalNav li {float:left;width:auto;position:relative;padding:0 10px 0 15px;color:#666;}
    #globalNav li li {float:left;width:auto;position:relative;padding:0 0 0 0;margin:0 0 0 0;background-color: #fff;color:#666;}
    #globalNav li li li{float:left;width:auto;position:relative;padding:0 0 0 5px;background-color: #fff;color:#666;}
    /* style the links for the top level */
    #globalNav a {display:block;font-size:12px; text-decoration:none; color:#666; width:auto; height:30px; border:0; line-height:29px;display: inline; }

    /* style the second level background */
    #globalNav ul li a.drop { background-image:url(../images/down.jpg); background-position: right center; background-repeat:no-repeat;padding:0 20px 0 0;}

    /* style the second level hover */
    #globalNav ul li a.drop:hover{url(../images/right.gif) no-repeat 130px center;color:#666; }
    #globalNav ul ul :hover > a.drop { url(../images/right.gif) no-repeat 130px center;color:#666;}
    /* style the third level background */
    #globalNav ul ul ul a.test {color:#666;padding:0 20px 0 0;}
    /* style the third level hover */
    #globalNav ul:hover ul:hover ul li a.test:hover{url(../images/right.gif) no-repeat 130px center;}
    #globalNav ul ul ul :hover > a.test { url(../images/right.gif) no-repeat 130px center;}

    /* hide the sub levels and give them a positon absolute so that they take up no room */
    #globalNav ul ul {visibility:hidden; position:absolute;height:0;top:25px;left:0; width:140px;}

    /* position the third level flyout menu */
    #globalNav ul ul ul{left:140px; top:-1px; width:140px;color:#666}

    /* position the third level flyout menu for a left flyout */
    #globalNav ul ul ul.left {left:-140px;color:#666;}

    /* style the second level links */
    #globalNav ul ul a { color:#0068b2; height:auto; line-height:1em; padding:5px 0 5px 15px; width:128px;border-width:0 1px 1px 1px;margin:0;}

    /* make the second level visible when hover on first level list OR link */
    #globalNav ul li:hover ul,
    #globalNav ul a:hover ul{visibility:visible;color:#666;}
    #globalNav ul:hover ul li a:hover{background-color: #0466af; color:#fff;}
    /* keep the third level hidden when you hover on first level list OR link */
    #globalNav ul:hover ul ul{visibility:hidden;}
    #globalNav ul:hover ul ul li:hover{background-color: #0466af;}
    #globalNav ul ul ul a { line-height:1em; padding:5px 0 5px 0; width:140px;border-width:0 1px 1px 1px;}
    /* make the third level visible when you hover over second level list OR link */
    #globalNav ul:hover ul:hover ul{ visibility:visible;}
    #globalNav ul li.sep{color:#666;margin:0;padding:.8em 0;font-size:80%;}
    [CODE]

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    It's because IE6 doesn't support :hover other than on a elements. You'll need a javascript solution. Have a look here or here.

  • #3
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks but I still don't think it's working unless I did something wrong. I uploaded the HTC file to my site and added the code to the body tag but it still doesn't seem to work. I tried the javascript ides as well, no luck. Any other ideas?

    body{behavior: url("csshover3.htc"); }

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I think css hover expects the .htc to be in the same directory as the css file. Try moving your htc file or setting:

    body{behavior: url("/csshover3.htc"); }

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    No, IE6 does support it. That's why it was built in the first place.

  • #6
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the feedback. I gave that a try (moved the htc file into the same folder as the CSS) but it still doesn't seem to be working. I'm wondering if it has something to do with the face that my actual navigation is being populated through an include (inc) file in a separate folder? Any ideas? Thanks again!

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Hmm. Only other thing I can suggest re the .htc file is to try version 2 of csshover. That's the one I've used and I have a vague recollection that version 3 gave me some problems as well.

    If that still doesn't work then the suckerfish solution's your best bet. Here, remember that you'll need to change the id to match your own, so this:

    Code:
    sfHover = function() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    etc....
    needs to change to:

    Code:
    sfHover = function() {
    	var sfEls = document.getElementById("globalNav").getElementsByTagName("LI");
    etc....

  • #8
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much, I think the suckerfish option worked!! I had tried that originally and it didn't work but this time it did. (I must have been missing something the first time.)

    It doesn't look quite the same as it does on the other browsers, but hopefully I can tweak that. Thank you very much for your help!!


  •  

    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
    •