11 replies [Last post]
Joe Lapp
Offline
newbie
Last seen: 12 years 51 weeks ago
Timezone: GMT-5
Joined: 2009-10-15
Posts: 5
Points: 6

Hi everyone,

I've created a simple tooltip-like feature that works on Safari and Firefox but not any version of IE. On IE, the form input elements are drawn above the popup, regardless of the z-index I assign. I've tried IE 6, 7, and 8. Can anyone figure out what's going on and how to fix it?

Click here to see the problem

(Please don't simply point me to a canned tooltip solution. I'm not creating an ordinary tooltip feature. What I'm posting here is a simplified distillation of the problem, so that you don't have to muck through all the junk associated with my actual implementation.)

For posterity, here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Z-Index Test</title>
 
<style type="text/css">
.field {
  position: relative; /* needed for positioning the note */
  width: 300px;
  text-align: right;
  margin-bottom: 8px; /* note shows between the form inputs */
}
 
.note {
  display: none;
  position: absolute;
  right: 0; /* extend note out to left of info icon */
  top: 22px; /* display note below info icon */
  width: 220px;
  background-color: #FFFF99;
  text-align: center;
  z-index: 10000; /* doesn't seem to help */
}
</style>  
 
<script type="text/javascript">
function showNote(noteID)
  { document.getElementById(noteID).style.display = 'block'; }
 
function hideNote(noteID)
  { document.getElementById(noteID).style.display = 'none'; }
</script>
</head>
 
<body>
<form action="/test" method="post">
 
<div class="field">
  Your Name: <input name="name" type="text" />
  <div id="name_note" class="note">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  <img src="InfoIcon.gif" onmouseover="showNote('name_note')" onmouseout="hideNote('name_note')" />
</div>
 
<div class="field">
  Handle: <input name="handle" type="text" />
  <div id="handle_note" class="note">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  <img src="InfoIcon.gif" onmouseover="showNote('handle_note')" onmouseout="hideNote('handle_note')" />
</div>
 
<div class="field">
  Password: <input name="password" type="password" />
  <div id="password_note" class="note">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  <img src="InfoIcon.gif" onmouseover="showNote('password_note')" onmouseout="hideNote('password_note')" />
</div>
 
</form>
</body>
</html>

Thanks for any help you can provide!

~joe

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 39 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You may well be out of luck

You may well be out of luck here; IE historically made a balls up of stacking contexts where position absolute was concerned. As you have set a new context on each instance of .field you effectively raise it above the stack level of the .note.

You might have to rethink where you position the .note or when I have run up against this and there was no cure I had to resort to controlling and setting the parent pos:rel and z-index:0; as required through the script.

One thing that surprises me is that you have the issue in IE8 that doesn't sound right, IE6 yes but IE8 is much better behaved.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 2 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Pretty much what Hugo says.

Pretty much what Hugo says. Old IE implemented position:relative as equivalent to position:relative; + z-index:0; If you add "z-index:0;" everywhere you use position:relative you should find all browsers (e.g. FF3.5/Safari 4/Chrome 3/IE8) behave in the same manner.

The trick is to not use position:relative until you have to. When you need to show the note, activate position:relative on .field. Rather than changing styles directly add an extra style to the field element (e.g. explain), in your css add some styles for ".explain" and ".explain .note" to alter styles for revealing the appropriate note. In your javascript you can move backup the DOM tree from the IMG element using parentNode. So something like

...
<img ... onmouseover="showNote()" onmouseout="hideNote()" />
...
 
function showNote() {
  this.parentNode.className += " explain";
}
function hideNote() {
  this.parentNode.className = "field";
}

FWIW, if you are going to do this sort of stuff more than once or twice (it can be addictive), throw this away and go lookup "jQuery". jQuery is quite easy to use, its well documented and it handles a lot of the compatibility issues between different browsers. And that compatibility thing is a big BIG deal.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 39 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Jquery is the method I use to

Jquery is the method I use to approach all scripting now for the reasons Chris mentions, that it smooths out cross browser issues that arise and that I simply do not want to waste time dealing with, it's the reason I accepted the use in general of a library in the first place along with the much nicer syntax that comes with it despite the perceived overheads it may add.

I had a very complex admin layout full of multiple form controls to which I had added a help pod that opened on click to give guidance on filling the various form sections in; this proved ultimately impossible to control from a stacking context in IE and I was wasting a lot of time finding fixes that worked until I was asked to add or change the layout at which point things fell apart again in IE. The final solution was to remove pos:rel and instead set a class on the parent when the child was activated (one benefit of jQuery is it's Xpath capability) only when the child was activated was the parent given the class and then removed afterwards this avoided all parents having position:relative and thus the problem.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Joe Lapp
Offline
newbie
Last seen: 12 years 51 weeks ago
Timezone: GMT-5
Joined: 2009-10-15
Posts: 5
Points: 6

Wow, you guys are

Wow, you guys are extraordinarily helpful. I was able to get Chris' fix to work, with one exception in IE 6.

But first, Hugo, IE 8 does indeed have the problem. Check the above link for yourself. IE 8 had so far been very well behaved for me, so I had assumed the error was mine rather than yet another IE bug.

The exception in IE 6 is that select input tags still render above the tooltip. Someone in another forum pointed me to the following post, which describes using an iframe to raise the z level:

http://www.webmasterworld.com/forum21/10664.htm

I've been unable to get this to work for me, partly because I'm not inclined to try to fix the height of my popups, and partly because I find myself having to deal with masking artifacts of the iframe.

Here is the code that works for everything but selects in IE 6:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Z-Index Test</title>
 
<style type="text/css">
.field,
.field_with_note {
  width: 300px;
  text-align: right;
  margin-bottom: 8px; /* note shows between the form inputs */
}
 
.field .note {
  display: none;
}
 
.field_with_note {
  position: relative; /* needed for positioning the note */
}
 
.field_with_note .note { /* oddly, Safari, Firefox, and IE all require this */
  display: block;
}
 
.note {
  display: none;
  position: absolute;
  right: 0; /* extend note out to left of info icon */
  top: 22px; /* display note below info icon */
  width: 220px;
  background-color: #FFFF99;
  text-align: center;
  z-index: 2; /* doesn't seem to help */
}
</style>  
 
<script type="text/javascript">
function nearestAncestor(obj, withClass) {
  while(obj) {
    if(obj.className == withClass)
      return obj;
    obj = obj.parentNode;
  }
  return null;
}
 
function showNote(obj) {
  nearestAncestor(obj, 'field').className = 'field_with_note';
}
 
function hideNote(obj) {
  nearestAncestor(obj, 'field_with_note').className = 'field';
}
</script>
</head>
 
<body>
<form action="/test" method="post">
 
<div class="field">
  Field 1: <input name="name" type="text" />
  <div class="note">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  <img src="InfoIcon.gif" onmouseover="showNote(this)" onmouseout="hideNote(this)" />
</div>
 
<div class="field">
  Field 2: <select name="handle"><option value='a' selected>Option A</option><option value='b'>Option B</option></select>
  <div class="note">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  <img src="InfoIcon.gif" onmouseover="showNote(this)" onmouseout="hideNote(this)" />
</div>
 
<div class="field">
  Field 3: <input name="password" type="password" />
  <div class="note">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  <img src="InfoIcon.gif" onmouseover="showNote(this)" onmouseout="hideNote(this)" />
</div>
 
</form>
</body>
</html>

Thank you soooo much for helping me. I've already spent roughly a full day on this, and you just spared me the rest of the week. Oh, also thank you for pointing me to jScript. I wonder how well it plays with Ruby on Rails.

(I'm thinking of letting IE 6 users rot. Not ideal.)

~joe

Joe Lapp
Offline
newbie
Last seen: 12 years 51 weeks ago
Timezone: GMT-5
Joined: 2009-10-15
Posts: 5
Points: 6

Oh, you can delete the

Oh, you can delete the z-index line in the CSS. It isn't needed.

Click here to see the fixed code in action

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 39 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Hmm interesting that IE8 has

Hmm interesting that IE8 has this issue, as it's one I would have thought would have been cleared up, I will check your original testcase in IE8, it's such a fundamental error that they seemed to create with stacking contexts that I assumed it would have been fixed, or thinking about it are the specs a little vague on the how stacking should flow when absolute is in the mix, maybe there isn't a test case which IE always liked to hold up as an excuse not to implement things Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Joe Lapp
Offline
newbie
Last seen: 12 years 51 weeks ago
Timezone: GMT-5
Joined: 2009-10-15
Posts: 5
Points: 6

Oops, Hugo, I stand

Oops, Hugo, I stand corrected. The browser installation I thought was IE 8 was actually IE 7. Sorry! IE 8 is indeed working as you suspected. :red-faced:

~joe

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 2 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Joe, you can have multiple

Joe, you can have multiple classes on one element, that's why I did things the way I did, so:

class="field"
class="field explain"

now you don't have to double up style selectors.

Joe Lapp
Offline
newbie
Last seen: 12 years 51 weeks ago
Timezone: GMT-5
Joined: 2009-10-15
Posts: 5
Points: 6

Thanks Chris. My first

Thanks Chris. My first attempt did something like that, but it didn't work for me, so I went for being more explicit. It might have been my mistake. I was having trouble getting "display" to change. It seemed to keep my original setting.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 49 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

IE8

Hm, I made CSS tooltips in forms, and IE8 has zero problems.

IE7 seemed to work but any following fieldset would overlap a tooltip from a previous fieldset. That was the only overlap/z-index problem I had with IE7.

IE6 let almost everyone overlap. Well, not simple text inputs! Only select dropdowns and controls like checkboxes (but not their labels), radio buttons and fieldset borders.

For IE6 alone I changed the position of the tooltips so they couldn't overlap anyone who cared (select dropdowns and the other form controls).

For IE6 and IE7 I spaced out fieldsets who came after a fieldset with a tall tooltip. Basically just the border of the fieldset wasn't covered over by the tooltip.

IE8, I can't get it to let anything overlap at all.

*edit Somehow I missed like the last three comments. So disregard, I see now that the OP also had no problems with IE8.

I'm no expert, but I fake one on teh Internets

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 39 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote: Hm, I made CSS

Quote:

Hm, I made CSS tooltips in forms, and IE8 has zero problems.

No not hm we have already settled that issue poes it was simply a mistake, IE8 wasn't suffering from the same issue.

oops overlooked your last paragraph Cool do ignore Wink

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me