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

Wayfinder IE issue regarding dropdown menu

    • 24665
    • 14 Posts
    reb87 Reply #1, 15 years, 11 months ago
    I’m trying to implement Wayfinder into my Modx setup. I got it all working, except for IE. When I hover over a dropdown menu, it doesnt show and cuts of the dropdown from the div. Wayfinder suggested that I’d use a different CSS file for IE. Normally, without Wayfinder the menu works perfect in all browsers. I’m using this menu script: http://www.stunicholls.com/menu/pro_dropdown_1.html Can someone please help? Thanks!


    menu_ie.css
    .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		: #36f;
	}
	
.menu ul li a:hover ul
{
	display			: block;
	position		: absolute;
	top			: 21px;
	left			: 0;
	width			: 105px;
	}
	
.menu ul li a:hover ul li a.sub
{
	background		: #6a3;
	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;
	}
	
.menu ul li a:hover ul li a:hover
{
	background		: #6fc;
	color			: #000;
	}
	
.menu ul li a:hover ul li a:hover ul
{
	visibility		: visible;
	position		: absolute;
	left			: 105px;
	top			: 0;
	color			: #000;
	}
	
.menu ul li a:hover ul li a:hover ul.left
{
	left			: -105px;
	}


    And the normal CSS file for the menu
    #nav 
{
	padding			: 0; 
	margin			: 0; 
	font-family		: arial, verdana, sans-serif;
	}

#nav li.top 
{
	display			: block; 
	float			: left; 
	height			: 30px;
	}

#nav li a.top_link 
{
	display			: block; 
	float			: left; 
	height			: 30px; 
	line-height		: 30px; 
	color			: #ccc; 
	text-decoration	: none; 
	font-size		: 11px; 
	font-weight		: bold; 
	padding			: 0 0 0 12px;
	}

#nav li a.top_link span 
{
	float			: left; 
	display			: block; 
	padding			: 0 24px 0 12px; 
	height			: 30px;
	}

/* Default list styling */

#nav li:hover 
{
	position		: relative;
	z-index			: 200;
	
	}

#nav li:hover ul.sub
{
	left			: 1px; 
	top				: 30px; 
	background		: #0c3251; 
	padding			: 0px; 
	border			: 0px solid; 
	white-space		: nowrap; 
	width			: 100px; 
	height			: auto; 
	z-index			: 300; 
	}

#nav li:hover ul.sub li a
{
	display			: block; 
	font-size		: 11px; 
	height			: 18px; 
	width			: 100px; 
	line-height		: 18px; 
	text-indent		: 0px; 
	color			: #ccc; 
	text-decoration		: none;
	border			: 0px solid; 
	text-align		: center;
	}

#nav li:hover ul.sub li a:hover 
{
	background		: #114a77; 
	color			: #fff; 
	}


#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{
	position		: absolute; 
	left			: -9999px; 
	top			: -9999px;
	width			: 0; 
	height			: 0; 
	margin			: 0; 
	padding			: 0; 
	list-style		: none;
	}
/* oud */
/* oud */



/* common styling */
.menu
{
	font-family		: arial, verdana, sans-serif;
	position		: relative;
	font-size		: 11px;
	z-index			: 200;
	display			: block; 
	float			: left; 
	height			: 30px;  
	color			: #ccc; 
	text-decoration	: none; 
	font-size		: 11px; 
	padding:5 0 0 0;
	/*font-weight		: bold;*/
	}
	
.menu ul li a, .menu ul li a:visited
{
	display			: block;
	float			: left;
	width			: 90px;
	text-align		: center;
	text-decoration	: none;
	height			: 25px;
	color			: #ccc;
	line-height		: 21px;
	font-size		: 11px;
	overflow		: hidden;
	}
	
.menu ul
{
	padding			: 0;
	margin			: 0;
	list-style-type	: none;
	}
	
.menu ul li
{
	margin-right	: 5px;
	position		: relative;

	float			: left; 
	display			: block; 
	padding			: 0 0 0 0; 
	}
	
.menu ul li ul
{
	display			: none;
	}

/* specific to non IE browsers */
.menu ul li:hover a
{
	color			: #ccc;

	}
	
.menu ul li:hover ul
{
	display			: block;
	position		: absolute;
	top				: 25px;
	left			: 0;
	width			: 105px;
	}
	
.menu ul li:hover ul li a.hide
{
	background		: #6a3;
	color			: #fff;
	}
	
.menu ul li:hover ul li:hover a.hide
{
	background		: #6fc;
	color			: #000;
	}
	
.menu ul li:hover ul li ul
{
	display			: none;
	}
	
/* submenu, no hover */
.menu ul li:hover ul li a
{
	display			: block;
	background		: #0c3251;
	color			: #fff;
	}
	
/* submenu, hover */
.menu ul li:hover ul li a:hover
{
	background		: #114a77;
	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;
	}
      • 10076
      • 1,024 Posts
      Frank Reply #2, 15 years, 11 months ago
      How did you setup wayfinder? you got this online somewhere, what version of IE. Revo or Evo?
        • 24665
        • 14 Posts
        reb87 Reply #3, 15 years, 11 months ago
        Someone else set this up using a tutorial (he doesnt know anymore were he got it from). It happens on all versions of IE. Were using ModX Revolution. To get this working, he made the following chunks:

        cssplay_dropdown
        <link rel="stylesheet" media="all" type="text/css" href="css/menu.css" />
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="css/menu_ie.css" />
<![endif]-->


        cssplay_inner
        <ul>
    [[+wf.wrapper]]
</ul>


        cssplay_outer
        <div id="menu">
    <div[[+wf.classes]]>
        <ul>
            [[+wf.wrapper]]
        </ul>
    </div>
</div>


        cssplay_parentRow
        <li><a [[+wf.classes]] href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a>
    <!--[if gte IE 6]>
    <a class="sub" href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]
    <table><tr><td>
    <![endif]-->
    [[+wf.wrapper]]
    <!--[if gte IE 6]>
	</td></tr></table>
    </a>
    <![endif]-->
</li>


        cssplay_row
        <li [[+wf.classes]]><a href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>


        I’ve tried anything with these chunks (removing the IE only tags, removing all the tags etc. etc.), but it doesn’t work. It needs to be this way in order for the menu to work. Well, it works, but the dropdown stays in the div. Image of what happens:



        You can see that the mouse over (light blue) and the dropdown (the small grey stripe underneath) work.
          • 10076
          • 1,024 Posts
          Frank Reply #4, 15 years, 11 months ago
          Hoi,

          looks to me as a CSS problem, could you put a link here, or if you prefer, PM a link.
          W can see more if we can check the css/html etc. These the menu CSS s you use?
          /* common styling */
.menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:2px 0 100px 0; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.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;}


          for ie
          .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:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; 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;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}


            • 24665
            • 14 Posts
            reb87 Reply #5, 15 years, 11 months ago
            Sure, the link is: http://www.benjemmin.com/modx/

            -edit-

            Yup, these are the ones Frank. wink
              • 10076
              • 1,024 Posts
              Frank Reply #6, 15 years, 11 months ago
              in the original Modx evo code it uses 
              if lte IE6
              as an conditional comment for the parentRowTpl same goes for the other one in your cssplay_dropdown.
                • 24665
                • 14 Posts
                reb87 Reply #7, 15 years, 11 months ago
                So, you suggest to change gte to lte? I’ve already tried that, and it didnt help. huh Also, on IE, it gives an error in the menu.js file (line 24). It seems that wayfinder messes up the whole menu thingy somehow.
                  • 10076
                  • 1,024 Posts
                  Frank Reply #8, 15 years, 11 months ago
                  O well funny cause I see it working fine here in IE7 IE8 and 9
                    • 24665
                    • 14 Posts
                    reb87 Reply #9, 15 years, 11 months ago
                    OMG, I just changed it to LTE, but now I don’t see any menu at all (using IE8 in virtualbox). What did you do? grin
                      • 10076
                      • 1,024 Posts
                      Frank Reply #10, 15 years, 11 months ago
                      I see, it s running in quirks mode, fix validation of your html...