Previous Message
Next Message

Getting past the IE6 z-index bug

Sent by Dave Sherohman on 17 June 2008 22:10


(Sorry about the double copy, Ingo.  I accidentally replied to sender
the first time instead of to list.)

On Tue, Jun 17, 2008 at 10:07:57PM +0200, Ingo Chao wrote:
> All subsequent <li> will be placed above the submenu, since these <li> 
> are coming later in the source.

Indeed.

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

- In IE, the submenus are now positioned absolutely rather than relative
  to their parent items.  Additional spacing (blank lines) has also
  appeared after submenu items containing a tags.[1]
- In Firefox, submenu items now jump to the right when moused over.

These changes are currently viewable at the previously-mentioned URL,
http://kuno.sherohman.org/~esper/linktree/menutest.html

[1] I've determined that the additional spacing is due to my having set
display:block on a tags so that the entire line will highlight on
mouseover rather than just the text portion.  Based on your initial
suggestion, I tried moving the background-color change from a:hover to
li:hover, but, while IE6 may recognize position:relative in li:hover,
changing background-color in li:hover has no apparent effect.

Setting display:block only in a:hover was also unsatisfactory, as it led
to the gaps appearing on mouseover, causing subsequent menu items to
jump around.  Setting a's margin, padding, and border to 0 along with
display:block produced no discernable change in the undesired spacing.

-- 
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/
Previous Message
Next Message

Message thread:

Possibly related: