IE6 showing duplicates of containers + z-index problem on IE6&7

156 Posts

neilcreek Reply #1, 18 years, 11 months ago

I’m having a couple of problems with getting my wayfinder menu to display correctly across platforms.

On IE6, top level items which are containers are being displayed twice, and the flyout menu is only appearing when hovering over the second one (but being displayed next to the first one).

Also, on IE 6 and 7, only the first item in the flyout submenu appears overlapping the main menu. The design calls for there to be a 10px overlap, which displays fine on firefox, but items below the first in IE are displayed underneath the remaining items in the top level of the menu. I’m using z-index to achieve the overlay effect.

Here is an example: http://www.ivanhoeps.vic.edu.au/schoolorganisation.html

This is my Wayfinder call:

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

This is the flyout.css:

/* common styling */
.menu {font-family: arial, sans-serif; width:196px; position:absolute; top:226px; left:0; font-size:13px; margin:18px 0 0 0; padding:0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#3c70ae; font-weight:bold; width:168px; height:17px;text-align:left; padding:7px 0 3px 2px; margin:0 0 0 26px; border:1px solid #3c70ae; border-width:0 0 1px 0; background:#C9D5EB; font-size:13px;}
.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:#3c70ae; background:#dde33b;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:150px; width:180px; z-index:10;}
.menu ul li:hover ul li a.hide {background:#dde33b; color:#3c70ae;}
.menu ul li:hover ul li:hover a.hide {width:180px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#3c70ae; color:#fff; width:180px; border:1px solid #fff; border-width:0 0 1px 0;padding-left:10px;}
.menu ul li:hover ul li a:hover {background:#3c70ae; color:#dde33b; border:1px solid #dde33b; border-width:0 0 1px 0;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:151px; top:0; color:#fff;}
.menu ul li:hover ul li:hover ul li a {display:block; width:200px; background:#3c70ae; color:#fff;}
.menu ul li:hover ul li:hover ul li a:hover {background:#3c70ae; color:#fff;}

This is the flyout_ie.css:

table {border-collapse:collapse; border:0; margin:0; padding:0;}

.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:#3c70ae; background:#dde33b;}
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:150px; width:150px;}
.menu ul li a:hover ul li a.sub {background:#dde33b; color:#3c70ae;}
.menu ul li a:hover ul li a {display:block; background:#3c70ae; color:#fff; width:180px; border:1px solid #fff; border-width:0 0 1px 0;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#3c70ae; color:#fff;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:151px; top:0; color:#fff;}
.menu ul li a:hover ul li a:hover ul li a {display:block; width:200px; background:#3c70ae; color:#fff;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#3c70ae; color:#fff;}

Let me know if you need to see any of my other code.

Thanks in advance for your help!

156 Posts

neilcreek Reply #2, 18 years, 11 months ago

Anyone?

332 Posts

chinesedream Reply #3, 18 years, 11 months ago

I don’t work on PC so it’s difficult for me to test your flyout menu and give you an accurate diagnostic, nonetheless, I think you should try to declare higher z-index in the flyout menu layer.

I see you only have z-index in this element:
.menu ul li:hover ul

You need to declare a higher z-index value in the descendent element, which is the second level of your menu, the flyout, so that IE can behave. Not that z-index only works with absolute or relative position, if the layer you wanted to add z-index to has no position declared already, you need to add it too.

As for the duplicated menu, I don’t kwow what is causing. Hope someone who are more knowledgabel with wayfinder can help you out.

p.s, I have an Australian client and his name is Ivan hoe

Cheer,

156 Posts

neilcreek Reply #4, 18 years, 11 months ago

Thank you for your reply. Unfortunately no matter what combination of z-index use in various style definitions, Icould not get it wot work. I’m completely fed up with this bug, and since it’s only a design issue, and doesn’t impact upon usability, I’ve decided sompy to move the submenu out so that it doesn’t overlap higher levels.

More importantly, I haven’t been able to figure out why IE6 is showing the top level items twice. This is a far more critical issue, as it completely kills the usability of the menu.

Has anyone got any suggestions how I could fix this problem please?

332 Posts

chinesedream Reply #5, 18 years, 11 months ago

Quote from: neilcreek at Oct 15, 2007, 02:01 AM

More importantly, I haven’t been able to figure out why IE6 is showing the top level items twice. This is a far more critical issue, as it completely kills the usability of the menu.

I think I know where the duplication comes from. Didn’t check your markup the first time I looked that page.

In your markup you have this:


What it means is that you are telling IE displaying the top level items twice (later added: well, not exactly telling IE to display twice, but that IE honors the first one, and obeying another one you specifically asked it to). The IE conditional comment is for CSS, not html markup, and actually I am rather surprise that it can also work for markup. This is quite a finding, though I doubt it legal.

As for the z-index in IE 6, I have confident what I suggested will work, perhaps the extra set of items preventing it. Anyhow, moving the second level further away to the right is good way to go.

☆ A M B ☆
24,524 Posts

sottwell Reply #6, 18 years, 11 months ago

Yes, it is legal, that IF conditional is an HTML construct. It is usually used for CSS, but it can also be used to insert <a> tags in IE 6 and below to emulate a "hover everything", since IE only hovers over <a> tags.

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

156 Posts

neilcreek Reply #7, 18 years, 11 months ago

The conditional is part of the Wayfiunder example "flyout" menu chunks, I assume to get the hover working a sotwell pointed out. Obviously somewhere along the line I’ve screwed something up so that it’s displaying twice. Can anyone see where I’ve made my error, or would it be okay to simply remove the conditional from the chunks?

Thanks for the help

332 Posts

chinesedream Reply #8, 18 years, 11 months ago

Ah ok, I didn’t realized that. So that flyout menu is utilizing Stu Nicholls from CSSPlay?

He is quite a talent and I got many inspiration from his CSS work, somehow I just do not like the way he does with the dropdown/flyout menu because he was hacking IE to the extreme to make IE works something that the browser is incapable of.

☆ A M B ☆
24,524 Posts

sottwell Reply #9, 18 years, 11 months ago

I remove the conditionals, and have the csshover.htc loaded in a conditional in the head of my templates, as the text file in the assets/js folder suggests:

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

156 Posts

neilcreek Reply #10, 18 years, 11 months ago

I gave this a try, and I’ve obviously done something wrong. I removed all the conditionals from teh 5 wayfinder chungs, and placed the above code into the head. On IE 6, the submenu fails to appear at all.

Here is my <head>:

<head>
<title>Ivanhoe Primary School - [*pagetitle*]</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<base href="http://www.ivanhoeps.vic.edu.au/"></base>
<link rel="stylesheet" type="text/css" href="[(base_url)]style.css" />
<link rel="stylesheet" type="text/css" href="[(base_url)]flyout.css" />
<link rel="stylesheet" type="text/css" href="[(base_url)]flyout_ie.css" />

</head>

What have I done wrong?