[UPHPU] IE z-index bug and CSS vs. table layout

[Walt Haas]

On Mon, 2007-01-22 at 11:07 -0700, Walt Haas wrote:
> OK Gurus, here's a wrinkle to the debate that I haven't seen mentioned.
> Go to:
> 
>   http://www.utahavalanchecenter.com/media-page.php
> 
> and mouse over the ovals on the map.  Each oval should pop up a box
> describing the regional danger rating for that region.  This is done
> entirely with CSS, there is no JavaScript involved at all.
> 
> The pop-up renders the same on IE6 and Firefox.  That was more easily
> said than done :-)  The problem is that Microsoft violated the W3
> standard in implementing z-index in CSS (surprise!).  They start a new Z
> index frame of reference whenever the position attribute is encountered,
> rather than whenever the z-index attribute is encountered.  As a result
> it's basically impossible to use position in the map (as far as I can
> see- show me a better way if you know it) so the only use of position in
> the layout is for the pop-up, and the rest of the layout is done with
> tables.
> 
> -- Walt

Wade replied (without quoting me):

> I'm not entirely sure what you're asking. You want an absolutely  
> positioned element who's absolute position is relative to it's parent?

Firstly, I'd like to see somebody produce the same hover effect without
using tables.  It's easy with Firefox but getting it to work in IE is a
lot trickier.  The pop-up should render the same in either browser.
Fool around with it for a while and see what you think.  The gotcha with
IE is the establishment of the new z-index frame of reference where
there shouldn't be one.

-- Walt