I can't get the CSSPlay Flyout Menu to work in IE

OK, I think I’m getting the hang of this. . . (maybe)

Re: The wayfinder config. I found the files and called them in my template as you indicated. However, no menu was generated using the config file, whereas a menu was generated by using the minimal wayfinder parameters. After some digging, I found the config file didn’t have the startId Parameter. Once I added the startId. I was good to go!

Should the config file have contained the startId parameter? Or is it assumed we need to add that?

Have others seen this?

Thank you!

Terry

you can call all parameters in your config
but I forgot to put the startid in the example tag I gave you (sorry)
I normally set the start id in the call not in the config.
but any option you use in the wayfinder call can be set in the config file.

Dimmy

OK, cool. That stumped me for a while but it was a good learning exercise for me regardless.

Here’s my final question regarding this flyout menu. Is this cross browser compatible?

Per my previous posts, I found several problems with the menu in IE6. Chinesedream made numerous comments on the CSS problems in my file (thank you chinesedreams for taking all the time to anlayze that). I’m still working my way through those comments.

But after some testing it seems to me the CSSplay file is not entirely cross-browser compatible. If I use this CSSplay file as is, on a blank page, with no wrappers/divs around the menu, it works perfectly in IE6 (and my other browsers). However, if I put the menu in a div and float it the right, the IE six peek-a-boo bug appears (http://www.positioniseverything.net/explorer/peekaboo.html). At least I believe that’s what this is. The menu disappears when the browser is resized. I’ve tried every fix I can find with no success.

Does this have anything to do with how this is implemented in MODX/Wayfinder?
Do I need to take this back to the CSSplay website for further assistance?

Have others found this problem and solved it?

Thank you
Terry

That is strictly a CSS issue, and of course IE’s broken implementation of css. It would happen in any page with the same styling, CMS or no CMS. As to how to fix it...

Quote from: Terry at Feb 10, 2008, 04:22 PM

OK, cool. That stumped me for a while but it was a good learning exercise for me regardless.

Here’s my final question regarding this flyout menu. Is this cross browser compatible?

Using the tpl chunks from the examples at http://www.muddydogpaws.com/development/wayfinder/examples.html, I found them to be fairly cross-browser compatible until I started changing things. I wanted some different colors and hover characteristics. Now my menu is somewhat broken in IE6 and when I get the time, I’ll try to fix it.

Bob

ok one thing that doe not work well in ie are flyouts that have no background set in css, when you set a bg color in css you will see that the flyout works and when you remove that part the flyout stops working.

a solution to this problem is to use a blang gif of 1 pix as background.


when styling a menu i need to look in ie after every edit. never know what breaks the css for ie

Dimmy

Can anyone tell me why I have no dropdown with thie CSS_Play dropdown menu in Wayfinder for a main menu item when I’m on that page in IE6?

On this page, the MODx item in the menu should have a dropdown and does in IE7 and FF but not in IE6:

http://bobsguides.com/MODx.html

Every item but the active one has its dropdown no matter which main page I’m on.

I’ve tried several things to fix it but nothing seems to work. It sure would be nice if IE6 had some of the tools available in FF.

Bob

I suspect that it’s because the dropdowns are triggered when hovering LI-elements. For that to work in IE6, you need to add support via a conditional comment to enable "whatever:hover" functionality. I just committed an update to the code last week or so that addresses :hover, :active and :focus in IE6. Get it here: http://www.xs4all.nl/~peterned/csshover.html

(I specifically suggest the one here: http://www.xs4all.nl/~peterned/htc/csshover2.htc)

Quote from: rthrash at Feb 11, 2008, 10:27 AM

I suspect that it’s because the dropdowns are triggered when hovering LI-elements. For that to work in IE6, you need to add support via a conditional comment to enable "whatever:hover" functionality. I just committed an update to the code last week or so that addresses :hover, :active and :focus in IE6. Get it here: http://www.xs4all.nl/~peterned/csshover.html

(I specifically suggest the one here: http://www.xs4all.nl/~peterned/htc/csshover2.htc)

On the nose (as usual). I hate to think how long that would have taken me to figure out on my own (maybe forever). I had to add a little .css to get the colors right, but everything is working now. The best part is that that code only loads for visitors with IE6.

Thanks!!

Bob

MODx comes with a csshover.htc file in the assets/js folder, as well as a few scripts that help with png behavior.