[Wayfinder] Drop down menu problem in MSIE

[Guest]

Welcome, Guest. Please login or register.
Did you miss your activation email?

1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[Jul]

Hi,

I'm new to Wayfinder. I could insert a drop down menu that works perfectly with Firefox but not with MSIE 7.

My menu looks like the demo menu here : http://www.cssplay.co.uk/menus/final_drop2.html
(as I use the same stylesheet), but I cannot find out which parameters are used, i.e. what content to put in my chunks.
I assume that the demo uses the outerTpl, rowTpl, parentRowTpl and cssTpl parameters.

I set my chunks as follow :

AP_wfd_outerTpl :

Code:

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

AP_wfd_rowTpl :

Code:

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

AP_wfd_parentRowTpl :

Code:

<li><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
[+wf.wrapper+]
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

AP_wfd_cssTpl :

Code:

<link rel="stylesheet" media="all" type="text/css" href="ultimate_drop.css" />

And my template inserts the Wayfinder snippet this way :

Code:

<div class="menu">
[!Wayfinder? &startId=`49` &level=`0` &parentRowTpl=`AP_wfd_parentRowTpl` &outerTpl=`AP_wfd_outerTpl` &rowTpl=`AP_wfd_rowTpl` &cssTpl=`AP_wfd_cssTpl`!]
</div>

In MSIE 7, outputed HTML is as follow :

Code:

<div class="menu">
<ul>

<li><a href="/mysite/index.php?id=56" title="Feuilles d'automne">Feuilles d'automne<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
    <li><a href="/mysite/index.php?id=48">Feuilles jaunes</a></li>
    <li><a href="/mysite/index.php?id=54">Feuilles brunes</a></li>
    <li><a href="/mysite/index.php?id=55">Feuilles rouges</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

</ul>
</div>

I assume that the problem is due to wrong chunks.
In particular, I dont't understand well what looks like conditional instructions.

Code:

<!--[if IE 7]><!--></a><!--<![endif]-->

Looks like strangely closed HTML comments... Conditional chunks processed by MODx ?
Who is able to explain ?

Thanks for any help.

[AMDbuilder]

The code looks to be correct, but if you want to compare it the structure is very similar if not the same to the code use in the Multiflex series of templates.  You might want to give one of those templates a try and see if it works.  If so just check the chunks for differences and that should resolve your problem.

AMDbuilder

[Jul]

Thanks. I tried your Multiflex 5 (5.4.1) serie of templates (http://modxcms.com/Multiflex-5-1844.html), i.e. 1COL_template and 2COL_template, with your chunks installed.

I used your CSS, especially all the ".navbar" styles which are defined in mf54_grid_nosidebar.css.

With 1COL template, I could get a multi-level drop menu.

The positive point is that the menu dropped also in MSIE.

It is not obvious for me to see how many levels does your drop menu have.
I think 3 (level 1=menu bar titles , level 2=drop menus, level 3 = submenus). Exact ?

One problem remaining is that the submenus diplay as soon as the main menus drop down and should not.
Another one is that submenus overlap the main menu, but I might change this more easily in the stylesheet.

I observed that one difference between my (wrong) configuration and yours is that don't use <ul></ul> markups around the [+wf.wrapper+] in chunk outerTpl. I also noticed that you use an innerTpl chunk.
I'll further try to debug my menu but it's not easy as this is a combination of chunks and stylesheets and it is difficult to compare the different combinations.

[AMDbuilder]

Hello,

The Multiflex series of templates are only 2 level templates so the default menu and 1x flyout level.  I just setup a flyout menu (http://www.cssplay.co.uk/menus/flyout_4level.html) for one site and what's interesting is the HTML code used is the same code use for the MF series templates.

So basically I suspect if you use your CSS and the MF chunks then everything should work just fine for you.  You might need to tweak the CSS slightly so the code works with the menu div, but nothing too hard.

AMDbuilder

[Jul]

Thanks. I tried to keep the three level structure from CSSPlay's menu.
Demo : http://www.cssplay.co.uk/menus/final_drop2.html

Although my menu is not working yet, I was able to build the correct markup hierarchy by setting chunks for outerTpl, innerTpl and parentRowTpl. Now, the structure is similar to the one that CSSPlay uses.

The problem that remains is that I'm unable to set class="drop" for the anchors in the rows pointing to submenus, i.e. parent rows. Of course, one can add class="drop" in the chunk called by the &parentRowTpl parameter. But then class="drop" is also written for the top-level rows, i.e. those of the menu bar. As we can see in CSSPlay's demo source code it should not.

Another mystery is how does the demo write one <li> entry with class="upone".
Using [+wf.classes+] outputed sometimes class="last" but never class="upone".

I posted in the French part of the forum the content of my chunks and, as attachments, the code generated by my call to Wayfinder as well as the code from CSSPlay's demo :
http://modxcms.com/forums/index.php/topic,30034.0/topicseen.html

I use the same stylesheet as the demo, that one can find in its source code between the <style></style> markup.

The big question is maybe "Which parameters does the demo use and what's the content of the miscellaneous chunks ?"