Question

I have this big data-entry sort of page, a table kind of layout using divs. Each row has subrows which can be toggled open/closed. The toggling is triggered using css visibility settings. Each "cell" of the table has a little image in its corner, you click on the image, and a popup window opens that allows you to put notes on the entry.

This popup window has a text area and a set of checkboxes, along with a button (input type=submit, I think). The popup is an iframe nested inside a hidden div.

In IE7, once you've popped open this notes iframe and scrolled the page down, mousing over the popup's textarea makes it disappear and show the page content beneath it. The checkboxes also show the page below when you mouse over.

So, I've tried a few different fixes. Z-index was what I was hoping could be used to fix this. no such luck. I might try replacing the text area with a plain input type=text but since the checkboxes also exhibit this bug, I suspect the one-line text input will also cause the bug.

Was it helpful?

Solution

in addition to block elements the z-index works for all elements that have what IE calls hasLayout read more

OTHER TIPS

The easiest way to trigger hasLayout (mentioned in another post) is to add zoom: 1.

When debugging some of the dumbest IE 6/7 display issues I will sometimes just dump a temporary

* {
    zoom: 1;
}

to my CSS and see if anything changes. If it does I start selectively adding it to elements starting with the element, the element's parent/children, etc.

zoom is only supported by IE, so it's pretty "safe" to have in your document. It also saves you from having to do anything crazy like absolutely positioning elements, etc.

If I remember right Z-Index's only work on block elements that are absolutely positioned. So try setting the position of the popup box to absolute and then try the z-index. If you need the popup to be in a certain position set the wrapping element to position relative. I have encountered this issue before, and I believe I solved it in just the way I have described.

I've had the exact same problem with both input fields and textareas in IE7, but only if I gave them a width.

I don't remember where I got it from, but I found this solution, it may not be very elegant, but it solved the issue. Just add:

filter:alpha(opacity=100)

to your css of style attribute of the troublesome fields.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top