homepage Welcome to WebmasterWorld Guest from 54.242.126.9
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
IE Z-Index Bug
Internet Explorer Z-Index Bug causing text to show through a hover
aabe51

5+ Year Member



 
Msg#: 3815207 posted 8:12 pm on Dec 28, 2008 (gmt 0)

I needed to solve a problem I had with the IE Z-Index bug on our web site Campus Talks list.

I listed the talks, one per line, with CSS hover stlye links to a summary, video, audio and transcript.

Everything worked well in all other browsers except IE, it allowed the links from the following talk to show through the hover, making the hover text unreadable.

The solution, I gave the div that contained each talk/links set a Z-Index value in decending order. I placed this Z-Index in the HTML file in an Inline stlye for each div, as such,

Talk No 1
div stlye = "z-index: 50"

Talk No 2
div stlye = "z-index: 40"

Talk No 3
div stlye = "z-index: 30"

Talk No 4
div stlye = "z-index: 20"

Talk No 5
div stlye = "z-index: 10"

This is for a test file of five talks.

I now applied this to our entire list of 1000 talks, using PHP and a template to give each talk the correct Z-Index.

Everything is working well in all browsers, except for, yes-your favorite and mine-Internet Explorer.

The z-index is now working correctly in that browser and the links from the following talk do not show through the hover of the selected talk.

However, it now takes until the count of 1000&3 for the hover to show when the mouse is put over the link in that browser.

All of the other browsers I test: FireFox 3.0.5, Opera 9.6, Safari and Google Chrome display the hover text almost instantly.

IE works fine when the list is only 5 talks long, but with over 1000 talks it is going slow and even crashing. It is possible that I have an error on the page that is troubling IE, however, I have the HTML Validator plugin installed in FireFox and it is giving my list a clean bill of health, showing the page to validate.

If anyone wants to venture a guess as to why I am having this problem I will post a link here or the source code if you want to tackle it.

aabe

 

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3815207 posted 12:39 am on Dec 29, 2008 (gmt 0)

Did you try to give your hovering text a solid background color instead of changing the z-index ?

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3815207 posted 2:41 am on Dec 29, 2008 (gmt 0)

Hi aabe51,
and welcome to webmasterworld ;) [webmasterworld.com]
That sounds complicated and odd. Guessing is not helpful, so post some code, but before you do, check the TOS (linked above) and the two posts pinned to the top of the css forum [webmasterworld.com] for the reasons links are not allowed, and an explanantion of how to prepare a code sample for posting.

aabe51

5+ Year Member



 
Msg#: 3815207 posted 2:59 pm on Dec 29, 2008 (gmt 0)

Hi swa66,

Yes, I tried that, but no matter what color I used it still showed through. After reading some posts on another web site I discovered that IE will start a new Z-Index stack when ever an element is contained in a parent element that is set to position: relative; but I think this applies to postition relaive or absolute.

That is why I used the solution I did. This fixed the problem with the links showing through, but now IE takes too much time to show the hover's as I mentioned in my post.

I am wondering if the problem is IE has created a z-index stack for each talk and it needs to sort out which one is active before it can display the hover.

I will respond to alt31 with some code so you can see what I have done.

Thanks for you help.

aabe51

aabe51

5+ Year Member



 
Msg#: 3815207 posted 3:12 pm on Dec 29, 2008 (gmt 0)

Here is the code for one of the talks. The next talk would have a z-index of 1252, the next 1251, the next 1250, and so on.

<td>
<div class = "sermon" style="z-index: 1253;">
<div class="sermontitle">1&nbsp;&nbsp;IS THERE A GOD?-77</div>
<div class="menu">
<ul>
<li><h2>Summary</h2>

<ul class="summary">
<li><span class="sermonsum">"Is there a God? If you already know the answer, how would you answer somebody on campus who asks it?' Most of us would say, 'What do the greatest intellects of our generation say?"" For instance, what do Einsten &amp; Darwin say?"</span></li>
</ul>
</li>
</ul>
<ul>
<li><h2>Video</h2>

<ul>
<li><a href="link to talk">View </a></li>
<li><a href="link to talk">Download </a></li>
</ul>
</li>
</ul>
<ul>
<li><h2>MP3</h2>

<ul>
<li><a href="link to talk">Listen </a></li>
<li><a href="link to talk">Download </a></li>
</ul>
</li>
</ul>
<ul>
<li><h2>Transcript</h2>

<ul class="trans">
<li><a href="#">Read Not Available</a></li>
<li><a href="#">Download Not Available</a></li>
</ul>
</li>
</ul>
</div>
</div>

</td>

This is the CSS to control the links:

.menu {
margin-right: .2em;
margin-top: -.2em;
width:30.75em;
padding-left:.25em;
padding-right:.25em;
float: right;
}

.menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 20%;
float: left;
}

.menu a, .menu h2 {
font: normal 1.1em arial, helvetica, sans-serif;
display: block;
margin: 0;
padding: 2px 3px;
}

.menu h2 {
color: #003399;
text-decoration: underline;
}

.menu a {
color: #003399;
text-decoration: underline;
}

.menu a:hover {
color: #a00;
background: #fff;
}

.menu li {position: relative;}

.menu ul ul ul {
position: absolute;

}

.menu ul ul {
position: absolute;
top: 1.5em;
left: 15%;
width: 145%;
padding: .2em;
border: #CCCCCC thin solid;
background-color: #999999;
z-index: 500;
}

.menu ul ul.summary {
width: 395%;
}

div.menu ul ul {
display: none;
}

div.menu ul li:hover ul
{display: block;}

div.menu ul ul,
div.menu ul li:hover ul ul,
div.menu ul ul li:hover ul ul
{display: none;}

div.menu ul li:hover ul,
div.menu ul ul li:hover ul,
div.menu ul ul ul li:hover ul
{display: block;}

aabe51

5+ Year Member



 
Msg#: 3815207 posted 3:15 pm on Dec 29, 2008 (gmt 0)

I am sorry, I forgot the doc type. Here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3815207 posted 7:11 am on Jan 1, 2009 (gmt 0)

Hi aabe51,

Following are some thoughts and possible solutions for the troubles you've reported, but could I strongly urge you to consider whether it's really necessary to use a style of presentation that creates such enormous usability and accessibility barriers.

Thanks for the code - my initial thoughts were a little different. A lot of work has gone in, but I think the solution lies in simplifying the code rather than adding more engineering.

As ie doesn't accept :hover on anything but <a>, I'm figuring you achieved this by javascript or a behaviour. As I don't know what script you used, I used the standard ie8.js for the demonstration, but if your javascript is different, the results may not be the same.

In terms of slowness, the js (and/or sourcing it) could well be a source of delay, however, there are some other things that may be contributing.

Using display to trigger visible/non-visible is common, but display:none means the element is given no space in the document flow. Changing to display:block means re-drawing the page to figure where the element should sit. Combine that with position:relative, and there is a lot to figure in order to be able to obey your directions about where to display the hover. Add that to sourcing a js file, plus repositioning 1000 of these, and am sure you can see how that translates to a lot of delay (plus ie losing its place if the page is scrolled faster than it can redraw which is a common javascript issue) ;)

display:none can cause problems for assistive devices (and sometimes winSafari) as some will not change display after display:none has been set. In reality you do want the elements to be displayed - you just don't want them visible until the user hovers. That makes visibility:hidden/visible the more accurate choice - and means no display redrawing issues as well. One issue down ;)

Position:relative makes sense, but as you know, there are issues with z-index etc. Plus, (when combined with display:block) ie draws a space below the h2 when displaying the hover. (More redrawing and so more delay issues.) However, the goal is to have the hover positioned near to the <h2>, and utilise position:absolute to remove the positioned element from the flow so it can be displayed "above" the other elements on hover. position:relative on the parent elements becomes redundant because that goal can be achieved by the default settings for position:absolute. In this case it will also avoid creating a z-index issue and automatically display the <ul> below and aligned to the left "relative" to the hovered <h2>. Issue two and three down ;)

Applying positioning (top/bottom) to the an absolute element positions it relative to the viewport (as absolute is designed to do), but that's not what is wanted - so no requirement to use positioning. What is desired is to position the list closer/further from the hovered <h2> - so use margins. Issue four down (I feel the need to keep score as it's a long post) ;)

Here is the css modified to show the above in action. Note there is no requirement for a z-index in either the css, or the html, and that includes the z-index applied to each row inline. I've removed some of styles that seemed redundant, or were having an unhelpful effect on the demonstration - like the widths - which were clipping the hovers. Some will need to be replaced, and the code could be further refined, but for now it works as designed in OP9.6&9.2, winSafari, ff2&3, ie5,5&6&7 without delay for several hundred of these <trs>. I couldn't test to 1000, as that amount of code simply crashed my editor.
* {
margin:0;
padding:0;
border:none;
}
.menu ul {
list-style: none;
float: left;
}

.menu a, .menu h2 {
font: normal 1.1em arial, helvetica, sans-serif;
color: #039;
padding: 2px 3px;
text-decoration: underline;
}

.menu a:hover {
color: #a00;
background: #fff;
}

.menu li {
width:14em;
}

.menu ul ul {
position: absolute;
margin:-1em 0 0 2em;
padding: 0.2em;
border: #CCC thin solid;
background-color: #999;
}

div.menu ul ul {
visibility:hidden;
}

div.menu ul li:hover ul {
visibility:visible;
}


Hope this helps

aabe51

5+ Year Member



 
Msg#: 3815207 posted 11:04 am on Jan 1, 2009 (gmt 0)

Hi alt131,

Thanks for taking the time to analyze my problems with IE and this good post. I had a brief read and I will need to take some time to digest and test your work. I will let you know how I get on.

aabe51

aabe51

5+ Year Member



 
Msg#: 3815207 posted 1:35 pm on Jan 3, 2009 (gmt 0)

Hi alt131,

I redesigned my code using your example and tested it in FF3 and IE7. With 735 talks (It will be 1000 in a few months), I am still having trouble with go slow in IE. However, when I reduced the list to just over 300 the delay is almost unnoticeable.

I will talk with my client about breaking the list up into smaller categories to eliminate this problem. Or, I will propose another way to do this large, 700+ talks list to avoid the delay; perhaps without the rollovers.

I think your code is a lot cleaner than mine, so I will use yours.

Thanks again,

aabe51

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved