The Blog

IE7 bug: will not render z-index change on li:hover

By On Tue, Jan 2nd, 2007 In CSS With 6 Comments Permanent Link to IE7 bug: will not render z-index change on li:hoverPermalink

While working on latest version of ADxMenu styles, I encountered another ugly IE7 bug.

PLAIN TEXT
CSS: 
    

  1. 

    .menu li {
    

    2. 

  2. 

    	z-index: 5;
    

    3. 

  3. 

    }
    

    4. 

  4. 

    .menu li:hover {
    

    5. 

  5. 

    	z-index: 10000;
    

    6. 

  6. 

    } 
    

    7.

This does not work in IE7 — it will not re-render the page. Here’s the example showing this problem.

update: David Hucklesby points to solution: IE needs a “nudge”, direction:ltr works. As well as a lot of other rules.

Banca

Banca

Beautiful and functional currency converter, supports just about any currency in the world.

Go Couch to 5k

Go Couch to 5k

The most popular starter running program in beautiful feature-rich app (GPS tracking, charts, detailed history etc)

Quickie to do

Quickie to do

The fastest short-term task-list / check-list app on the App Store. Really.

Guerrilla Cardio

Guerrilla Cardio

The most challenging high-impulse interval training in the world.

Run Mate

Run Mate

A versatile running coach app, with unlimited number of running programs. Perfect for casual runners.

6 Comments

Feel free to chime in, looking forward to it. Leave a Comment

  1. David Hucklesby says:
    Wed, Jan 3rd, 2007 at 2:25 ·

    I wonder if this is the old IE “:hover” problem, where IE 5/6 needed a “nudge” to recognize a change? The old bug was only on links, of course, but required a property on :hover that does not appear on the (non-hovered) element. This came up with Eric Meyer’s “Pure CSS popups” and may or may not be related.

    There are several properties you can try. Off the top of my head, I seem to remember that background-position: 0 0; or direction: ltr; work, among others.

  2. Aleksandar says:
    Wed, Jan 3rd, 2007 at 11:34 ·

    David da man!
    Many thanks, it is that same bug.

  3. Glenn Gilbert says:
    Fri, Sep 21st, 2007 at 18:56 ·

    Thank you David.

    I can’t tell you how many hours I’ve been beating my head against this problem to no avail. A quick “direction:ltr;” and everything’s working *as it should*.

    If only the gormless mob from Seattle delivered working code — only when hell freezes over.….

  4. Ali A. Akbar says:
    Mon, Jun 23rd, 2008 at 2:53 ·

    Thanks. Helpful for me too. I was about to say: F U IE> and never look back. lol.

  5. dnnsldr says:
    Fri, Feb 6th, 2009 at 21:54 ·

    I want to thank you for the little trick (hack really) for the IE7 bug. I couldn’t understand why IE7 was not displaying my li a:hover background color. It would display the text-color change, but not the background change (tab effect). A quick direction:ltr fixed it.

    Thanks,

  6. Rolando Alvarado says:
    Mon, Jul 20th, 2009 at 20:39 ·

    Holy cow! This one saved my ass.. i was just about to give up.. thanks a lot.. i wonder if this works on ie6 too..

Comments are now closed for this article.

←
→