Sent by Dave Sherohman on 17 June 2008 23:11
On Tue, Jun 17, 2008 at 11:26:37PM +0200, Ingo Chao wrote:
> >> The generic approach to fix that problem is to set position:relative on
> >> li:hover only. By doing this, the subsequent <li> will not be placed
> >> above the hovered <li> in question, because only this li is positioined
> >> and gets a higher rank in the painting order.
> >>
> >> Did you try that?
> >
> > Not until you suggested it, as all I've read has stated that IE6 only
> > supports :hover on a tags, implying that anything on li:hover would be
> > completely ignored.
> >
> > While this has resolved the z-order issue, it caused a new set of
> > problems: ...
>
> Sure. But as long as your li keep beeing positioned relatively, the bug
> occurs. They /need/ to be positioned relatively when hovered, so your
> inline-scripting cannot solve for the problem.
At this point, the only javascript I'm using is to toggle the submenu
visibility:
<li onmouseover="document.getElementById('popuplist').style.visibility='visible'"
onmouseout="document.getElementById('popuplist').style.visibility='hidden'"
>
It does not attempt to address z-ordering.
> You may have to use suckerfish scripts or alike to have a class .sfhover
> to declare li.sfhover {position:relative} for IE.
That sucks (no pun intended)... I was hoping to be able to do this with
no javascript at all, just CSS. I didn't much like needing to do inline
js visibility toggles to make up for IE6's lack of li:hover, but external
libraries? So much for being simple and self-contained.
> I did not tell you to remove the relative positioning. I've tried to
> explain the mechanism of the bug, and the general workaround.
Based on my understanding of the general workaround, I went from
li
{
white-space: nowrap;
text-align: left;
list-style-type: none;
}
ul.top li
{
position: relative;
background-color: #c0c0c0;
}
to
ul.top li
{
list-style-type: none;
white-space: nowrap;
text-align: left;
background-color: #c0c0c0;
}
ul.top ul li:hover
{
position: relative;
}
I did not remove the relative positioning, I just moved it from li to
li:hover, but this seems to have been sufficient to cause IE to make it
absolute, even when hovering on the li.
--
News aggregation meets world domination. Can you see the fnews?
http://seethefnews.com/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
