totally lost -- textarea in IE7 disappears when i mouse over

Question

i'm just going to toss this question up in a rough form now, while i'm thinking of it, and come back to flesh out the details. it's terribly vexing. maybe someone here will know wtf is going on.

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 it's 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 textarea and a set of checkboxes, along with a button (input type=submit, i think). the popup is an iframe nested inside a hidden div.

on 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. wtf? 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 textarea 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

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.

Answer 2

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

Answer 3

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 4

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.