hasLayout.net

Affected Versions

This bug affects: IE6

Symptoms

Rules with selectors such as a:hover foo{} do not "work"

Date of the Tutorial

Sat Jul 18 20:43:24 2009

Description

So, you've got some funky code where you have a hidden <span> or whatever inside your <a> and you show it on CSS :hover... great... and IE seems to fail on that one even though it does support :hover on <a> elements. What's up with that?

Demo

Due to the nature of the bug, the demo is available on a separate page.

HTML Code:

<a href="#">FOO <span>BAR</span></a>

CSS Code:

span {
    display: none;
}

a:hover span {
    display: inline;
}

In all sane browsers when you move your mouse over text "FOO", text "BAR" would appear next to it. Not the case in affected browsers...

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Layout Solution)

Date of the Solution

Sat Jul 18 21:25:45 2009

Fixed Versions

all of the affected

Description

Due to the nature of the bug, fixed demo is available on a separate page

HTML Code:

<a href="#">FOO <span>BAR</span></a>

CSS Code:

span {
    display: none;
}

a:hover span {
    display: inline;
}

Conditional Comments:

<!--[if lte IE 6 ]>
    <style type="text/css">
        a:hover {
            zoom: 1;
        }
    </style>
<![endif]-->

Giving "layout" to a:hover fixes the bug - easy as pie. Go read hasLayout page and pick your favorite "layout" giving method.

Note: sometimes this bug is fixed by element's ancestors having "layout"

Comments

Currently there are no posted comments.

Donate / Buy My Books

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my book: