Textarea in IE7 disappears on mouse over

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.

Answer 1

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.

Answer 2

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