My problem has to do with my layout, which resembles a handheld electronic device (don't worry, I understand this is pretty cheesy =)
The window to this device is an iframe that displays book results, and its positioned to appear within the image of the handheld.
Here are two versions of this layout, for you to see:
Go ahead and type in a keyword in the top text input, and hit enter, or 'buy,' or 'sell.' To see how things work.
In the first example the iframe appears on top of the image. To mozilla users, all looks and works well. IE, however, does not support a 'border:none' on an Iframe, and so it looks rather ugly because it covers up the image window.
In the second example, the iframe appears below the image, which is a transparent PNG. Mozilla users will not be able to scroll through results because it is below the PNG. To IE users, this is fine and all looks and works well.
The only solution I can think of is to use PHP to print out a different z-index for the iframe, depending on which browser is looking at this page. I find this solution unelegant because it ignores the wishes of other browsers, and doubles my maintenance problems.
I would like to know if anyone has a more intuitive solution to this problem. Is there a way to make an IE Iframe behave as well as a Mozilla one? Is there something that I could do that I'm simply not seeing--being NOT a CSS Guru.
workaround for this z-index cross-browser inconsistency?
Have you resolved these problems? All seems fine to me.