CSS Hover Problems

[xkratosx]

Hi guys,

You may of remembered I posted here a few days since I had problems with some javascript code that wasn't registering the onmouseout function in Internet Explorer.

Well, some very kind chap from mIRC came up with a solution that worked fully in CSS which is great, however, I stupidly forgot to fully test it in IE6 until the next day and I've just realised it's still not quite right in IE6.

If you take a look at this page in Firefox or Opera - http://www.zestdesign.net/ - you should see that when you rollover the sidebar pictures the border colour will change, as will the image position of the other items so they appear to be greyed out - but when you load it up in Internet Explorer 6 it does nothing when you roll over it

Any help would be fantastic, thank you!

[Tailslide]

Replace this:

#side:hover a:hover {background-position: top;border: #CC3366 4px solid;}

With this:

#side a:focus, #side a:hover, #side a:active {background-position: top; border:#CC3366 4px solid;}

The active rule will make IE6 hover and the focus rule will aid keyboard navigation.

[hexburner]

That's normal. Only a-elements in IE6 kan have :hover.
So #side:hover will not work in IE6, unless you use JavaScript or a HTML Component (htc).

If you go the HTC way, it's more simple:

1. Put the contents of the HTC-file you download from here in a PHP file, and put <?php header("Content-type: text/x-component"); ?> on the first line of the file. This is needed to work in SP2.
2. Put this in your CSS-file, and do NOT add a selector to this part, else the HTML Component will run twice!

body { behavior: url('csshover.htc');}

[hexburner]

Replace this:

#side:hover a:hover {background-position: top;border: #CC3366 4px solid;}

With this:

#side a:focus, #side a:hover, #side a:active {background-position: top; border:#CC3366 4px solid;}

The active rule will make IE6 hover and the focus rule will aid keyboard navigation.

That won't fix the problem that xkratosx is telling us about, but you got a point. This will not grey out the other images in the list, but you'd better do what Tailslide says, ul#side:hover won't work in IE6 and lower anyways.

By using the HTC you CAN use :hover on any element. The HTC will only be executed in IE5, IE5.5 and IE6. HTC's don't work in any other browser or IE7.

[xkratosx]

Thank you so much Tailslide! Seems to of worked an absolute treat in IE7, not sure about IE6 yet since I don't have it installed here yet. One thing, and this is me being really picky, but in IE7 when you rollover the area between the bottom two pictures all of the others stay grey, yet when you rollover the area between the top two it flashes between white/grey, I hope this makes some sort of sense.

http://www.zestdesign.net/ - Basically, is it at all possible so when you roll down the different pictures it'll stay greyed out 'til you actually roll over an item? Hope that makes some sort of sense... I created the effect in Firefox by using a border on the item instead of a margin.

[xkratosx]

@ hexburner, sorry, only just saw your messages! Seems like a great solution thank you, that script is a little over my head, but I guess the gist is that it basically lets you apply the :hover command to basically any element at all? Including the li element I'm trying to apply to now Looks great thank you!

[xkratosx]

hex, just tried using your code and it's doing some really weird things now in IE6: http://www.zestdesign.net/

Any ideas please?