Issue in IE when Javascript adds elements

HTML & CSS
1

Hello all,
I have a demo page where Javascript adds some elements to a page. The problem is, some spans which are in the HTML already which appear as popups on hover/focus are not wholly “above” (covering) these new javascripted elements, in IE 6 and 7. Right now IE6 doesn’t even get the Javascript but in 7 this is still a problem. I’ll have to check IE8 tomorrow.

the text that appears when you hover over the ?'s (or if you just focus on the labels) is see-through in IE. Setting a different background colour doesn’t cover it… setting the z-index of the javascripted elements to 0 and the spans to a bazillion doesn’t either. I suspect it’s not z-index here but something to do with how IE paints new elements onto the page.

I wonder if anyone has a better idea about this. If the only way to fix this is to have Javascript undo the CSS hovertext and change it into a Javascripted hover text, then I’ll do it, but I’d rather not. The JS is already clumsily built and unwieldy.

2

I haven’t tried the page in IE7, but I’m almost sure it’s about z-index. But you need to set it on a parent rather than on <span>s. Go up the DOM tree from those <span>s and test.

3

Ah, yeah, good idea. I’ve done that for menus before for IE’s z-index bug. I’ll see if it helps.

4

Nope, duh… the reason I didn’t try this before, I remember… both elements have the same positioned parent. Raising its z-index won’t do anything here.

I might be able to switch the order around though.

5

I was suggesting going up not just one level. And make sure that the selector for the z-index declaration is targeting positioned elements.

6

It’s the positioned parent you have to set… only works if the two things have separate parents.

I ended up having IE set a wider web page (min-width: 940px) for now.

Code was such:


<form>...
<div>
  <label><a>Foo <span>foo</span></label>
  <input...>
  <p>inserted by javascript</p>
</div>
...
</form>

form div {
position: relative;
}

label span {
position: absolute;
}
form div p {
position: absolute;
}

The p’s come later in source, so the spans could never compete in IE. Since the p’s are abso-po’d, they could have been inserted at the beginning of the divs, though this means content-wise it makes less sense (the p’s are just showing a resulting price based on the selected value of the related input).

IE8 is ok with this so moving the p’s out of the way is working for now. This site is based on old code, and the reworking I’m doing for related sites would get around this problem by separating the help text from the labels entirely (using ARIA attributes to get screen readers to announce them) so order doesn’t have to be so rigid.