We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

[SOLVED] Not working in IE6

    • 15976
    • 44 Posts
    kittie Reply #1, 17 years, 2 months ago
    My wayfinder menu isn’t working in IE6 it works fine in IE7 and atleast the two previous firefox versions. Is anyone able to shed any light on why this would be happening?

    dropdown.css:
    /* common styling */
.menu {font-family: arial, sans-serif; width:941px; position:relative; margin:0; font-size:11px;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:188px; text-align:center; color:#fff; font-size:11px; overflow:hidden; height: 35px; line-height: 35px;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background: url(../../../../templates/default/images/nav_over.jpg);}


    dropdown-ie.css:
    .menu ul li a, .menu ul li a:visited {position: absolute; top: 50%;}

.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: url(../../../../templates/default/images/nav_over.jpg);}
.menu ul li a:hover ul {display:block; position:absolute; top:35px; left:0; width:188px; }
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background: url(../../../../templates/default/images/nav_bg_green.jpg); color:#fff;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background: url(../../../../templates/default/images/nav_over.jpg); color:#fff;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:188px; top:0; color:#fff;}
.menu ul li a:hover ul li a:hover ul.left {left:-188px;}
.menu ul li:hover ul {display:block; position:absolute; top:35px; left:0; width:105px; }
.menu ul li:hover ul li a.hide {color:#fff;}
.menu ul li:hover ul li:hover a.hide {color:#fff;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background: url(../../../../templates/default/images/nav_bg_green.jpg); color:#fff;}
.menu ul li:hover ul li a:hover {background: url(../../../../templates/default/images/nav_over.jpg); color:#fff;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}
      • 25969
      • 118 Posts
      Marcel Reply #2, 17 years, 2 months ago
      It’s not Wayfinder’s fault specifically, but your dropdown-ie.css contains li:hover selectors which IE suckfully won’t work with. You need to use either whatever:hover or some JS to add/remove a class on hover, etc.
        • 28042 ☆ A M B ☆
        • 24,524 Posts
        sottwell Reply #3, 17 years, 2 months ago
        You can add an IE conditional to include the assets/js/csshover2.htc file, which will enable IE 6 to behave in a more compliant manner.
        <!--[if lte IE 6]>
<style type="text/css" media="screen, tv, projection">
body { behavior: url([(base_url)]assets/js/csshover2.htc); } /* hover:anything support */
</style>
<![endif]-->
          Studying MODX in the desert - http://sottwell.com
          Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
          Join the Slack Community - http://modx.org
          • 15976
          • 44 Posts
          kittie Reply #4, 17 years, 2 months ago
          Thank you, it’s sorted now smiley