We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 3749
    • 24,544 Posts
    Quote from: cubefisher at Jun 04, 2008, 10:48 PM


    You used the regular dropdown exactly how I’m trying to, but mine’s all hosed in IE6 too. What were the "few tweaks" you mentioned above?

    It’s been a while so I can’t remember exactly what I did but I found this:

    <!--[if lte IE 6]>
    <link rel="stylesheet" media="all" type="text/css" href="assets/templates/wayfinder/dropdown_ie.css" />
    <![endif]-->
    and

    And here’s dropdown_ie.css:

    body { behavior:url("csshover2.htc"); }
    
    .menu ul li a.hide, .menu ul li a:visited.hide {
    display:none;
    }
    .menu ul li a:hover ul li a.hide {
    display:none;
    }
    .menu ul li a:hover {
    color:#fff; 
    background:#337799; /* darker teal */
    }
    .menu ul li a:hover ul {
    display:block; 
    position:absolute; 
    top:30px; left:0; 
    width:144px;
    }
    .menu ul li a:hover ul li a.sub {
    background:#6a3; /* green */
    color:#fff;
    }
    .menu ul li a:hover ul li a {
    display:block; 
    background:#ddd; 
    color:#000;
    }
    .menu ul li a:hover ul li a ul {
    visibility:hidden;     /* keeps third-level flyouts from appearing in main dropdown */
    }
    .menu ul li a:hover ul li a:hover {
    background:#aacccc; /* sky blue */
    color:#000;
    }
    .menu ul li a:hover ul li a:hover ul {
    display: block;
    visibility:visible; 
    position:absolute; 
    left:144px; 
    top:0; 
    color:#000;
    }
    /* these are mine */
    
    .menu ul li ul li a:visited {
    background:#ddd; 
    color:#000;
    }
    
    
    .menu ul li.active ul li a, .menu ul li.active ul li a:hover {
      background:#ddd; 


    Hope this helps . . .
      Did I help you? Buy me a beer
      Get my Book: MODX:The Official Guide
      MODX info for everyone: http://bobsguides.com/modx.html
      My MODX Extras
      Bob's Guides is now hosted at A2 MODX Hosting
      • 6118
      • 13 Posts
      Thanks, Bob. I did try that, and it didn’t work. I’ll confess that I went so far as swiping your two stylesheets and substituting them for mine. Unfortunately, I’m still stuck. Thanks for giving it a shot, though. You also had a post that mentioned #IEroot, and I’ve tried that too. Also didn’t work.

      The behavior I’m experiencing in IE6 is that any menu items that have children to put in a dropdown a) don’t drop down and b) get repeated directly below themselves.

      Can anyone speculate that it would have anything to do with my wayfinder call?

      What’s tough about this is that I’m not really seeking to become a CSS expert, but the only way I’m going to fix this is, I fear, to become a CSS expert. Sounds lazy, I know. If anyone has a clue here, please share. clearly, some element of my ie stylesheet is not "compatible" (that is, it ain’t doin’ what I want it to).

      Also, if anyone can point me to a turnkey wayfinder example that’s known to work with IE6 (along the lines of the muddydogpaws examples) I’d be psyched to see that too.

      Thanks in advance!



        • 3749
        • 24,544 Posts
        Quote from: cubefisher at Jun 05, 2008, 09:23 PM

        Thanks, Bob. I did try that, and it didn’t work. I’ll confess that I went so far as swiping your two stylesheets and substituting them for mine. Unfortunately, I’m still stuck. Thanks for giving it a shot, though. You also had a post that mentioned #IEroot, and I’ve tried that too. Also didn’t work.

        The behavior I’m experiencing in IE6 is that any menu items that have children to put in a dropdown a) don’t drop down and b) get repeated directly below themselves.

        Can anyone speculate that it would have anything to do with my wayfinder call?

        There are some amazing .CSS gurus here (I’m not one of them wink ) who might be able to help you if you could provide a URL to your problem site.

          Did I help you? Buy me a beer
          Get my Book: MODX:The Official Guide
          MODX info for everyone: http://bobsguides.com/modx.html
          My MODX Extras
          Bob's Guides is now hosted at A2 MODX Hosting
          • 25663 MODX Staff
          • 12,272 Posts
          Yep it’s amazing what a few minutes in Firebug can do for figuring out CSS issues.
            Ryan Thrash, MODX Co-Founder
            Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
            • 6118
            • 13 Posts
            Thanks guys, I appreciate the willingness to witness my floundering. I’ve not tried firebug. I did poke at it with the IE developer toolbar. Not sure if they’re comparable (probably not the place to ignite such a discussion). Either way, ’twas of no use to me, amateur that I am.

            From what I’m gathering as I’ve monkeyed with this, my problem is the :hover. I’ve tried bolting on both csshover.htc and csshover2.htc to the .css to try to get over that, and neither have helped. User error on my part, I’m sure. My understanding of how to use wayfinder and .css (for anything other than ease of formatting) are new and limited. The menu I implemented was, ahem, borrowed directly from one of the muddydogpaws.com examples - dropdown.

            Anyway, if anyone is willing to take a look at http://www.vicariousoutdoors.com/modx, I’d be much obliged. I hate to ask, but at this point I’ve cruised the forums, googled the heck out of this, and so on, and I’ve seen lots of people with this issue, but little in the way of answers...other than wishing for the day that IE6 goes the way of the dodo.

            Thanks in advance...er...again.
              • 4310
              • 2,310 Posts
              I don’t think your "&parentRowTpl" chunk is correct for the Ultimate Dropdown menu.
              It should be something like this:
              <li><a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]<!--[if IE 7]><!--></a><!--<![endif]-->
              <table><tr><td>
              
              [+wf.wrapper+]
              
              </td></tr></table>
              <!--[if lte IE 6]></a><![endif]-->
              

              That should avoid the "About" item being repeated.
              Your ie.css file may now work.
                • 6118
                • 13 Posts
                WOO_HOO!!!!!!!!

                That got rid of the repeating "About" item.

                Now I just need to figure out how to get the dropdown part to drop on hover.

                At the risk of going to the well too many times, any thoughts on that?
                  • 4310
                  • 2,310 Posts
                  This is my CSS file, it’s for all browsers.
                  You may need to change the spacing, colours etc.
                  Unfortunately I can’t use the web developer toolbar from Firefox to check it works in IE6!
                  See the menu working at http://crickweb.co.uk
                  /* ================================================================ 
                  This copyright notice must be untouched at all times.
                  
                  The original version of this stylesheet and the associated (x)html
                  is available at http://www.cssplay.co.uk/menus/final_drop.html
                  Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
                  This stylesheet and the associated (x)html may be modified in any 
                  way to fit your requirements.
                  =================================================================== */
                  
                  .menu {width:775px; height:32px; font-size:0.9em; position:relative; z-index:100;border-right:1px solid #fff; padding-left:6px;font-family: "Trebuchet MS"; font-weight: bold;}
                  /* hack to correct IE5.5 faulty box model */
                  * html .menu {width:777px; w\idth:775px; padding-left:2px;}
                  /* remove all the bullets, borders and padding from the default list styling */
                  .menu ul {padding:0;margin:0;list-style-type:none;}
                  .menu ul ul {width:85px;}
                  /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
                  .menu li {float:left;width:85px;position:relative;}
                  /* style the links for the top level */
                  .menu a, .menu a:visited {display:block;font-size:11px; text-decoration:none; color:#fff; width:85px; height:30px; border:1px solid #fff; border-width:1px 0 1px 1px; background:#000066; text-align:center; line-height:29px;}
                  /* a hack so that IE5.5 faulty box model is corrected */
                  * html .menu a, * html .menu a:visited {width:86px; w\idth:85px;}
                  
                  /* style the second level background */
                  .menu ul ul a.drop, .menu ul ul a.drop:visited {background:#d4d8bd url(http://www.cssplay.co.uk/graphics/drop.gif) bottom right no-repeat;}
                  /* style the second level hover */
                  .menu ul ul a.drop:hover{background:#c9ba65 url(http://www.cssplay.co.uk/graphics/drop.gif) bottom right no-repeat;}
                  .menu ul ul :hover > a.drop {background:#c9ba65 url(http://www.cssplay.co.uk/graphics/drop.gif) bottom right no-repeat;}
                  /* style the third level background */
                  .menu ul ul ul a, .menu ul ul ul a:visited {background:#e2dfa8;}
                  /* style the third level hover */
                  .menu ul ul ul a:hover {background:#b2ab9b;}
                  
                  
                  /* hide the sub levels and give them a positon absolute so that they take up no room */
                  .menu ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:85px;border-top:1px solid #000;}
                  /* another hack for IE5.5 */
                  * html .menu ul ul {top:30px;t\op:31px;}
                  
                  /* position the third level flyout menu */
                  .menu ul ul ul{left:85px; top:-1px; width:85px;}
                  
                  /* position the third level flyout menu for a left flyout */
                  .menu ul ul ul.left {left:-85px;}
                  
                  /* style the table so that it takes no ppart in the layout - required for IE to work */
                  .menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}
                  
                  /* style the second level links */
                  .menu ul ul a, .menu ul ul a:visited {background:#607799; color:#fff; height:auto; line-height:1.5em; padding:5px 10px; width:65px;border-width:0 1px 1px 1px;}
                  /* yet another hack for IE5.5 */
                  * html .menu ul ul a, * html .menu ul ul a:visited {width:87px;w\idth:65px;}
                  
                  /* style the top level hover */
                  .menu a:hover, .menu ul ul a:hover{color:#fff; background:#3333CC;}
                  .menu :hover > a, .menu ul ul :hover > a {color:#fff; background:#3333CC;}
                  
                  /* make the second level visible when hover on first level list OR link */
                  .menu ul li:hover ul,
                  .menu ul a:hover ul{visibility:visible; }
                  /* keep the third level hidden when you hover on first level list OR link */
                  .menu ul :hover ul ul{visibility:hidden;}
                  /* make the third level visible when you hover over second level list OR link */
                  .menu ul :hover ul :hover ul{ visibility:visible;}
                    • 6118
                    • 13 Posts
                    Nice! that seems to work in IE6 pretty well. Thanks!

                      • 4310
                      • 2,310 Posts
                      Hope you get it working. wink