z-index in IExplorer??

[psilos]

Hello everyone,

is there any problem with z-index and iexplorer?

I have created a menu and while everything is ok on FF i have this problem in IE:967

My Html is:

<ul id="navmenu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul style="z-index:0">
<li><a href="#">Team</a></li>
<li><a href="#">History</a>
<ul style="z-index:10; margin-left: -25px; margin-top: 5px;">
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
</ul>
</li>
<li><a href="#">Offices</a></li>
</ul>
</li>
</ul>

[boogyman]

it wouldn't surprise me!
at the same time, All versions before IE7 doesnt support :hover, if you are doing the menu in CSS. I have been told that IE7 has support for it, but it might be a bug in the system...
:eek: WHAT A SHOCKER, IE has a bug :p

[psilos]

Yes i know IE doesn't support :hover. I have used javascript for IE..

That's why i'm asking about z-index in IExplorer, is there any known problem?

Thanx

[mwinter]

is there any problem with z-index and iexplorer?

Probably, but your particular style sheet may be of more importance. If the links are positioned within each list element, one might expect to see what you have.

Please post a link to an example.

Mike

[Veronica]

Can you send your css for navmenu?

[psilos]

ok the link is: menu (http://www.ideart.gr/delete/armos/menu/).

Included CSS + Javascript.

[psilos]

Any Advice on z-index problem??

[Veronica]

I'm not sure, but the original suckertree script had the ul levels displaying next to each other, not overlapping. So it may only work correctly if the margins are set so they don't overlap. That may not be the look you want, but it's readable and better that what it does now in IE!

[psilos]

Yes i know it would be better than it is now,
but unfortunately i work for a creative agency, so we focus very much in
the esthetic and in the design of the page. ;)

And since i'm not doing the design, only the development i'd have to repine again against IExplorer...grrr. I don't believe it has to do with the implementation of the menu... It's IE problem (I think).

[jscheuer1]

I think mwinter was on to something (he usually is). In IE, style cascades a little differently than it does in other browsers such that, with links and lists especially. If a given style could apply to a given link or list or list item, it will - unless it is specifically contradicted, sometimes even if it is contradicted. In other browsers, a class of links or items will usually automatically set them apart from other links or items.

Another possibility is that the script you are using may be to blame.

In any event, if IE understands the z-index values you intend to assign, it will work out. The trick is in assigning them in a way that IE understands exactly what you have intended. Fortunately, this usually will not interfere with other browser's but can. When it does, conditional comments are a handy way of assigning some style(s) to IE only.

Using z-index:0 in the ul could be making all elements contained within it also z-index:0 - regardless of their set z-index. Since 0 is the default though, it shouldn't need to be specified.

A link to your page (or the code or link to of a full example that demonstrates the problem) would probably be required for more detailed help. Your demo (linked in an earlier post) page doesn't appear to feature the problem. The submenus don't stay open long enough in IE to tell. In others, it works fine.

[pcbrainbuster]

I know for a fact z-index is supported...

[Veronica]

Have you tried setting the position and z-index for the ul/li in the hover state?

[boogyman]

Have you tried setting the position and z-index for the ul/li in the hover state?

ie6 and before doesnt support the hover state, that is why you need the javascript addative

[psilos]

original posted by jscheuer1
A link to your page (or the code or link to of a full example that demonstrates the problem) would probably be required for more detailed help


It includes all the code needed + CSS of the menu.
The problem appears only in IE.



original posted by jscheuer1
The submenus don't stay open long enough in IE to tell

I'm testing it on IE 6/ Windows.
In what system do you have this problem?
Are there others with this problem?

[jscheuer1]

It includes all the code needed + CSS of the menu.
The problem appears only in IE.


I'm testing it on IE 6/ Windows.
In what system do you have this problem?
Are there others with this problem?

I used IE 7, there are some real problems there but, (since it can do :hover on virtually all tags) if it can be made to follow the same display path as other browsers, it might work out. For IE 6 (just happened to have a copy around):


<div class="suckertreemenu">
<ul id="navmenu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Team</a></li>
<li style="z-index:10;"><a href="#">History</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
</ul>
</li>
<li><a href="#">Offi . . .

It inherits its z-index from that li.

[psilos]

ok i would search it a little bit about IE7.

now about css, i don't want to manually add this rule every time i change menu..
or in everyone submenu i have in. I want a general css rule..

So if i instead of this, put this

ul#navmenu li ul li{
z-index:10;
}

then it has no result..

What i have found about it is that i should run a loop(javascript) inside ul#navmenu li ul and for every li i find i should increase z-index by 1 for this li.

I would try it later and post.

[boogyman]

What i have found about it is that i should run a loop(javascript) inside ul#navmenu li ul and for every li i find i should increase z-index by 1 for this li.

umm if you did it for every li you would be getting the same problem you are having now. because your submenu is declared within the li so after the submenu was done, it would go to the next li in the parent menu thus giving same effect.

if you want to use the script then I suggest you add to every "li ul" thus insuring that your submenus will always have a higher z-index

[jscheuer1]

You could use a class.

[psilos]

Ok i have found the solution for IE with the method i mentioned above,
but instead of increasing z-index for every li i find inside #navmenu, i decrease z-index.

I post it for future reference.
So now script will be:


navHover = function() {
var zin = 100;
var lis = document.getElementById("navmenu").getElementsByTagName("LI");
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover=function() {
this.className+=" iehover";
}
lis[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
lis[i].style.zIndex = zin;
zin--;
}
}
if (window.attachEvent) window.attachEvent("onload", navHover);


Argghhh!!! Internet Explorer...