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

[Wade Preston Shearer]

> 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.

Yes, they are doing it without any javascript, but I would criticize  
their method. Although they have gotten it to work without javascript  
and is MSIE, they have had to create pretty ugly markup. Since MSIE  
only supports hover on anchor tags, they loaded one up with all of  
the markup for the pop up. You're not supposed to put all of that  
inside of an anchor. Sure, it works, but would much rather see  
someone use javascript then do that.

You shouldn't have to do that. You should be able to apply :hover to  
just about anything. All browsers support this except MSIE.

So, what is the proper solution? I would recommend the "suckerfish"  
approach. They markup the code properly, allow all browsers that  
support it to do it right, and then sprinkle in a teenie, tiny big of  
javascript (12 lines) to get it to work in MSIE.

Check out the code, it's beautiful:

http://www.htmldog.com/articles/suckerfish/dropdowns/example/


> 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.

I would do it like this (and then add the javascript to make it work  
in MSIE):

http://anavidesign.com/examples/popup/