Wayfinder: Ultimate Drop Down Menu - Doesn't work in IE 6

9 Posts

lu_lle Reply #1, 18 years, 5 months ago

I think this is a very common problem, but i didn’t find a solution for me in the many threads on this topic.

My site is http://www.fachschaften.uni-muenchen.de/geologie/neueseite4/

In Safari, Firefox, IE 7 the Menu shows up just like it should and works like a charm, but in IE 6 it’s all messed up... the menu bars are arrangend on top of eachother and range the whole space...

i will post my snippet call and the css code in a few minutes...

thank you so far!!! would be great if you could help me...bye

9 Posts

lu_lle Reply #2, 18 years, 5 months ago

the snippet call

[[Wayfinder? &startId=`0` &level=`3` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_dropdown`]]

this is the dropdown.css (i changed some things here)

/* ================================================================ 
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/dd_valid.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* common styling */
.menu {width:760px; position:relative;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; height:23px; text-align:left; color:#286ea0; border:1px solid #fff; border-width:0px 0px 0px 0px; background:#e0e0e0 url(../Andreas02/images/corner.gif) top right no-repeat; line-height:23px; overflow:hidden; padding:0px 8px 0px 8px;}
.menu ul {padding:0; margin:0; list-style: 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:#36f url(../Andreas02/images/corner.gif) top right no-repeat; width: 115;}
.menu ul li:hover ul {display:block; position:absolute; top:23px; left:0; width: 115px;}
.menu ul li:hover ul li a.hide {background:#d0d0d0; color:#286ea0; width: 115px;}
.menu ul li:hover ul li:hover a.hide {background:#b0b0b0; color:#286ea0; width: 115px;}
.menu ul li:hover ul li ul {display: none; width: 115px;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#286ea0; width: 115px;}
.menu ul li:hover ul li a:hover {background:#d0d0d0; color:#286ea0; width: 115px;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:131px; top:0; width: 115px;}
.menu ul li:hover ul li:hover ul.left {left:-115px; width: 115px;}

and this is the dopdown_ie.css....i didn’t really change anything in this document...?!? so i think it isn’t even loaded.?!

/* ================================================================ 
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/dd_valid.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.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;}

87 Posts

wordcooper Reply #3, 18 years, 5 months ago

This is a known problem. One of the solutions is to add conditional table statements in the source, but I think that is very ugly and overkill.

Here is a good site: http://www.cssplay.co.uk/menus/drop_definition.html

I added a conditional external css just for IE6 and below and don’t use flyouts. The layout looks uglier in IE6, but I don’t care.

Just learning the ropes.

4,205 Posts

dev_cw Reply #4, 18 years, 5 months ago

I think that the path to the IE css is not correct. When I try to access it directly I get a 404 page not found error.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

24,544 Posts

BobRay Reply #5, 18 years, 5 months ago

I never got the ultimate dropdown menu to work in IE6 (though it’s probably possible). I switched to the regular dropdown/flyout menu and got it to work with IE6 with a few tweaks. I’m not sure what advantages, if any, the "ultimate" one has.

You can see it at the site in my sig.

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

60 Posts

traveller_ted Reply #6, 18 years, 5 months ago

This would seem to be an answer, albeit one which will need restyling assuming my experiment worked properly. This css comes for the later (?) web site version of the menu, however having extracted it and created a simple file, I quickly copied your web page and then added this ’style sheet’ as the last entry before </head> This then made your menu work, in IE6, though in wrong colours sizing etc.

As an aside this would indicate that the code created by Wayfinder is fine but that the css has moved forward. Looks like there’s no need for a specific IE file, for example.

HTH
Regards
PS This code comes from the web page http://www.cssplay.co.uk/menus/final_drop2.html

.menu {FONT-SIZE: 0.85em; PADDING-BOTTOM: 200px; WIDTH: 750px}
.menu UL {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none}
.menu UL UL {WIDTH: 150px}
.menu LI {FLOAT: left; WIDTH: 150px; POSITION: relative}
.menu A {BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; DISPLAY: block; PADDING-LEFT: 10px; FONT-SIZE: 11px; BACKGROUND: #758279; BORDER-LEFT: #fff 0px solid; WIDTH: 139px; COLOR: #fff; LINE-HEIGHT: 29px; BORDER-BOTTOM: #fff 0px solid; HEIGHT: 30px; TEXT-DECORATION: none}
.menu A:visited {BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; DISPLAY: block; PADDING-LEFT: 10px; FONT-SIZE: 11px; BACKGROUND: #758279; BORDER-LEFT: #fff 0px solid; WIDTH: 139px; COLOR: #fff; LINE-HEIGHT: 29px; BORDER-BOTTOM: #fff 0px solid; HEIGHT: 30px; TEXT-DECORATION: none}
 HTML .menu A {WIDTH: 139px}
 HTML .menu A:visited {WIDTH: 139px}
.menu UL UL A.drop {BACKGROUND: #949e7c}
.menu UL UL A.drop:visited {BACKGROUND: #949e7c}
.menu UL UL A.drop:hover {BACKGROUND: #c9ba65}
UNKNOWN {BACKGROUND: #c9ba65}
.menu UL UL UL A {BACKGROUND: #e2dfa8}
.menu UL UL UL A:visited {BACKGROUND: #e2dfa8}
.menu UL UL UL A:hover {BACKGROUND: #b2ab9b}
UNKNOWN {BACKGROUND: #b2ab9b}
.menu UL UL {LEFT: 0px; VISIBILITY: hidden; WIDTH: 150px; POSITION: absolute; TOP: 31px; HEIGHT: 0px}
 HTML .menu UL UL {TOP: 31px}
.menu UL UL UL {LEFT: 150px; WIDTH: 150px; TOP: 0px}
.menu UL UL UL.left {LEFT: -150px}
.menu TABLE {LEFT: 0px; POSITION: absolute; TOP: 0px}
.menu UL UL A {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #d4d8bd; PADDING-BOTTOM: 5px; WIDTH: 129px; COLOR: #000; LINE-HEIGHT: 1em; PADDING-TOP: 5px; HEIGHT: auto}
.menu UL UL A:visited {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: #d4d8bd; PADDING-BOTTOM: 5px; WIDTH: 129px; COLOR: #000; LINE-HEIGHT: 1em; PADDING-TOP: 5px; HEIGHT: auto}
 HTML .menu UL UL A {WIDTH: 129px}
.menu A:hover {BACKGROUND: #949e7c; COLOR: #fff}
.menu UL UL A:hover {BACKGROUND: #949e7c; COLOR: #fff}
UNKNOWN {BACKGROUND: #949e7c; COLOR: #fff}
.menu UL LI:hover UL {VISIBILITY: visible}
.menu UL A:hover UL {VISIBILITY: visible}
.menu UL :hover UL UL {VISIBILITY: hidden}
.menu UL :hover UL :hover UL UL {VISIBILITY: hidden}
.menu UL :hover UL :hover UL {VISIBILITY: visible}
.menu UL :hover UL :hover UL :hover UL {VISIBILITY: visible}

24,544 Posts

BobRay Reply #7, 18 years, 5 months ago

For the bobsguides.com dropdown menu there’s no special IE6 stuff. There are two minor conditionals for IE in general (using the #IEROOT qualifier) but that’s it.

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

60 Posts

traveller_ted Reply #8, 18 years, 5 months ago

Should just note this is a single css file for all browsers, with conditional statements, which are Wayfinder produced managing the menu.

Regards

9 Posts

lu_lle Reply #9, 18 years, 5 months ago

thank you guys,

i finally got it to work....

13 Posts

cubefisher Reply #10, 18 years, 3 months ago

Quote from: BobRay at Apr 26, 2008, 03:23 PM

I never got the ultimate dropdown menu to work in IE6 (though it’s probably possible). I switched to the regular dropdown/flyout menu and got it to work with IE6 with a few tweaks. I’m not sure what advantages, if any, the "ultimate" one has.

You can see it at the site in my sig.

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?