%li:hover issue in IE6

[gubs]

Using compass blueprint;
Has anyone come across an issue in which placing a hover on an li
didn't work in IE6.

We're trying to Implement a dropdown menu in which rolling over the
list-item should display:block the sibling list...
Done it many times before and can only find the difference in this
project to be +blueprint.

Any help would be greatly appreciated. Thanks,
gubs

[Brandon Mathis]

Using compass blueprint;
Has anyone come across an issue in which placing a hover on an li
didn't work in IE6.

IE6 only supports :hover on <a> elements. You'll either need to use <a> tags, which may not be semantically correct, or you'll need to use javascript to add add a class like "hover" to your <li> when the cursor is over the element. Then when the cursor leaves the element you'll have the javascript remove that class. Now instead of using :hover in your css, you'll add those styles under the class "hover".

[Andrew Vit]

On Nov 3, 2009, at 6:56 PM, Brandon Mathis wrote:

Using compass blueprint;
Has anyone come across an issue in which placing a hover on an li
didn't work in IE6.

IE6 only supports :hover on <a> elements. You'll either need to use <a> tags, which may not be semantically correct, or you'll need to use javascript to add add a class like "hover" to your <li> when the cursor is over the element.

Check out “IE7.js”, it fixes a bunch of other CSS shortcomings as well:

http://code.google.com/p/ie7-js/

Andrew Vit

[gubs]

What's strange is that I've been able to get the dropdown to work
before in IE6 with the li hovers. In trying to pinpoint the
difference in the code that could be changing the behavior of the
li's, I've come to think it's probably something in Blueprint. I was
hoping to overwrite a style that was causing the difference instead of
implementing scripts...

[Brandon Mathis]

If you're having trouble figuring out where things are going wrong,
it's a good idea to create an html debug page where you only have your
list and the bare minimum styles:

li {background: #ccc; }
li:hover {background: #aaa; }

I'm skeptical that you can get that to work in IE6.

[Andrew Vit]

On Nov 4, 2009, at 9:05 AM, gubs wrote:

>
> What's strange is that I've been able to get the dropdown to work
> before in IE6 with the li hovers. In trying to pinpoint the
> difference in the code that could be changing the behavior of the
> li's, I've come to think it's probably something in Blueprint. I was
> hoping to overwrite a style that was causing the difference instead of

> implementing scripts…

If there is a case where it actually works, I would be interested to
see that, but I doubt it. It’s a known fact that hover only works on
<a> elements in IE6. Maybe you had some other script adding “hover”
classes or emulating that behaviour?

Andrew Vit

[gubs]

We have two projects that I've been able to get the li hover to work
with in IE6; however, I've yet to be able to narrow down why it works
in these two and not the new one in progress.

A working example is the global nav at http://teufel.com/landscape
when you mouse over 'Teufel Landscape'.

[G. D. Speer]

These are all a elements. a:hover works fine in IE6 and before.
Nesting an a tag inside an li tag is not the same as accessing li:hover.

--------------------------------------------------------------------------------



No virus found in this incoming message.
Checked by AVG - www.avg.com
Version: 8.5.424 / Virus Database: 270.14.51/2482 - Release Date: 11/05/09
07:37:00

[G. D. Speer]

These are all a elements. a:hover works fine in IE6 and before.
Nesting an a tag inside an li tag is not the same as accessing li:hover.

----- Original Message -----
From: "gubs" <gu...@botandrose.com>
To: "Compass" <compas...@googlegroups.com>
Sent: Thursday, November 05, 2009 9:02 AM
Subject: [compass] Re: %li:hover issue in IE6

[gubs]

the hover event displaying the dropdown menu is on the li.

ie:

%ul
%li
%a
%ul
%li
%a

ul li ul{display:none}
ul li:hover ul{display:block}

On Nov 5, 8:41 am, "G. D. Speer" <gsp...@cortech.org> wrote:
> These are all a elements.  a:hover works fine in IE6 and before.
> Nesting an a tag inside an li tag is not the same as accessing li:hover.
>
> ----- Original Message -----
> From: "gubs" <g...@botandrose.com>
> To: "Compass" <compas...@googlegroups.com>
> Sent: Thursday, November 05, 2009 9:02 AM
> Subject: [compass] Re: %li:hover issue in IE6
>
> We have two projects that I've been able to get the li hover to work
> with in IE6; however, I've yet to be able to narrow down why it works
> in these two and not the new one in progress.
>

> A working example is the global nav athttp://teufel.com/landscape

[Andrew Vit]

On Nov 5, 2009, at 10:34 AM, gubs wrote:

> the hover event displaying the dropdown menu is on the li.
>

> ul li ul{display:none}
> ul li:hover ul{display:block}
>

>> We have two projects that I've been able to get the li hover to work
>> with in IE6; however, I've yet to be able to narrow down why it works
>> in these two and not the new one in progress.
>>

>> A working example is the global nav at http://teufel.com/landscape

>> when you mouse over 'Teufel Landscape’.

I don’t know about you guys, but the layout on that page is broken for
me in IE6 and there are no dropdowns on hover. Are you sure you mean
IE6, not IE7?

Andrew Vit

[gubs]

Ahha. It seems our developer 'forgot' that he added a hover.htc to
the ie6 stylesheet... no wonder none of my tests were working. Thank
you all for your assistance in helping me realize that it wasn't
actually my amazing css that was the case.

On Nov 5, 3:56 pm, Andrew Vit <and...@avit.ca> wrote:
> On Nov 5, 2009, at 10:34 AM, gubs wrote:
>
> > the hover event displaying the dropdown menu is on the li.
>
> > ul li ul{display:none}
> > ul li:hover ul{display:block}
>
> >> We have two projects that I've been able to get the li hover to work
> >> with in IE6; however, I've yet to be able to narrow down why it works
> >> in these two and not the new one in progress.
>

> >> A working example is the global nav athttp://teufel.com/landscape

[Micah]

mea culpa. i, the project programmer, had stealthily included an htc
in our ie6.sass : http://www.xs4all.nl/~peterned/htc/csshover3-source.htc
... so steathily, in fact, that i had forgotten i had done it, and
instructed michael to ask you guys for assistance when we believed the
difference was blueprint. thank you very much for your attention, and
ill endeavour to waste your time less in the future!

On Nov 5, 12:56 pm, Andrew Vit <and...@avit.ca> wrote:
> On Nov 5, 2009, at 10:34 AM, gubs wrote:
>
> > the hover event displaying the dropdown menu is on the li.
>
> > ul li ul{display:none}
> > ul li:hover ul{display:block}
>
> >> We have two projects that I've been able to get the li hover to work
> >> with in IE6; however, I've yet to be able to narrow down why it works
> >> in these two and not the new one in progress.
>

> >> A working example is the global nav athttp://teufel.com/landscape