Forum Moderators: not2easy
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?
<snip>
(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
(BTW, previewing this post squeezes out all the whitespace formatting in the code tag. Plus I'm getting different sized fonts in the code.)
[edited by: swa66 at 11:11 am (utc) on Oct. 15, 2009]
[edit reason] No links, please see ToS and Forum Charter [/edit]
Search - IE z-index bug - It is a well known issue. There are CSS and JS fixes. Haven't time to hack it out this evening, but will come back to it if no one else does first.
In IE positioned elements can create new stacking order and context. Depending upon the markup, a real hassle to fix. It is well documented however, so should be realistic to find the right fix for your needs.
Somebody that works with z-index fairly often might be able to spit out the solution right off. I've fixed for IE just enough to know that the a lot depends on the specific markup, so it's trouble every time because of not having it come up that often.
Legacy IE versions create additional stacking contexts, they should not create. Working around them is a pain. I once accidentally bumped into using negative z-index values:
[webmasterworld.com...]
Which might work for what you're trying to do as well.
Someone in the CSS Creator forum was able to provide a solution that worked for everything but selects in IE 6:
<snip>
The trick was to specify "position:relative" only at the last minute, when popping up the "position:absolute" it contains.
~joe
[edited by: swa66 at 7:36 pm (utc) on Oct. 15, 2009]
[edit reason] linking policy [/edit]
