14 replies [Last post]
Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

http://www.tyssendesign.com.au/sites/nav-test.html

I can't figure out why the hover won't work in IE.

ul#top-nav a:hover img, 
ul#top-nav a:focus img, 
ul#top-nav a:active img, 
ul#top-nav a#active img { visibility: hidden; }

I'm using the same style for the active link which does work, so why not the hover? :?

Also, in IE5.01, you can't click on the links except for a tiny little piece near the bottom corners (you need to move the mouse around to find it). IE5.5 is the same as IE6.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Hover won't work in IE

Thats you and me both then tyssen, I've just played with this for about an hour , re-written the code about 20 times , tried every thing I can think of, even tried to control on the stacking context, nothing will work, it just wont accept the pseudo classes.

It would prove interesting to see if the original code works in IE7 if it does then it would seem there are two choices: ignore the fact that it does not work in IE6 or completely change your approach to cater for IE6.

I'm sure you have your reasons but to my mind you're trying a rather tricky approach to a image swap, is the foreground image just for the sake of rendering the images in text only mode? if so is that absolutely required, personally I dislike any graphics( gifs, decoration etc) in plain text always preferring that at most plain text carries images or company logo.

It will be interesting to see if there is a solution as the code stands that I have overlooked

I think ultimately you will need to re-think the inline image approach, but stand to be corrected.

Once again IE re-affirms our frustrations, so convincingly Oups

Hugo

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 45 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Hover won't work in IE

This is the culprit:

 
ul#top-nav a:hover img, 
I think I read somewhere that :hover must be the last selector; that is, you can't have a descendent img. Notice that the :focus img works fine. IE doesn't support :active at all.

This is probably why I haven't done this slick rollover effect, though I wanted a similar effect on something in the editor right now. I think you're gonna hafta switch bg images. Too bad. Can you slip in a less cool method of hi-liting on hover for IE and have this as a 'progressive enhancement' for modern browsers?

Those reflected icons are way cool.

[edit] I should add that the alternative is javascript. [/edit]

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Hover won't work in IE

Not quite Gary.

IE often requires a ":hover" style on the element to kick start the :hover changes. Tyssen, place a neutral :hover rule on the A and things should work.

e.g.

ul#top-nav a:hover { padding: 0; }

Also, IE does support :active, it doesn't support :focus. In fact for IE, :active pretty well works like :focus - hence its favour in accessibility sites where :active is used to bring the "skip links" to the surface in IE (:focus can be used for other browsers).

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Hover won't work in IE

I don't feel so bad after all Gary, I thought you had found a solution Smile I knew it was a problem with the :hover Smile he said hastily!

IE supports :active not :focus

Interesting swap focus and hover in the grouped rules; focus first hover second and you can tab through the links along with activating them, sadly hover still won't work though.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Hover won't work in IE

For IE, you'll need the same thing as on the :hover,

ul#top-nav a:hover, ul#top-nav a:active { padding: 0; }

fyi, whatever:hover was updated in Feb. There are now two versions, the first is :hover & :active (as before) and the second adds :focus as well.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 45 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Hover won't work in IE

Ah, Chris, nice work-around on the :hover. I shall keep it in mind.

I just did check Tyssen's page for :focus. When tabbed through the links, the :focus rules were applied as each link gained focus. The rules were not applied if focus was gained backward, [shift][tab]. :shrug:

That is counter to the 'book',

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Hover won't work in IE

How did that man snick in there with that post without me seeing.

I knew that solution Oups I was just working my way towards it slowly.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Hover won't work in IE

Chris..S wrote:
For IE, you'll need the same thing as on the :hover,

ul#top-nav a:hover, ul#top-nav a:active { padding: 0; }
That's what did it Chris but not quite perfectly. Using padding actually gave me a slight shift in all the graphics on hover. Using border: none or background-color: #000 removed the problem except from the 'contact' and 'work' graphics where they move 1px to the right. But this only happens in IE6. :? IE5.5 is fine. IE5.01 still has the problem whereby you can't actually click the links except for a tiny sliver around the edges of the graphic.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Hover won't work in IE

The graphics aren't moving. You have alignment problems between your centering methods. Google to find out more about pixel alignment between centered backgrounds and foreground centering using left and right margins of auto . iirc, at least make sure your graphics are even widths.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Hover won't work in IE

Chris..S wrote:
iirc, at least make sure your graphics are even widths.

That's not an option here because the space between the graphics needs to contract/expand based on the window size.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Hover won't work in IE

How about you put that 15.8% IE only width on the li rather than the a.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Hover won't work in IE

I had it on the <a> because without it IE6 left no space between the images (IE5 did). I've taken it off now and created the space with some horizontal padding on the <a> but have had to set it to an amount small enough that it doesn't break at 800 x 600 which means that at 1024 x 780, the images don't fill as much as the screen. I guess it's a small trade-off I can live with.

It's really got me stumped what is actually happening though because IE5.5 has no problem and if you put IE6 into quirks mode, it works too. But adding height: 1% didn't seem to make any difference in this case.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Hover won't work in IE

It needs a float: left as well + take the float: left off the UL. So the IE only styles become:

* html ul#top-nav {  }
* html ul#top-nav li { display: inline;  float: left; width: 15.8%; }
* html ul#top-nav a { display: inline-block; }

Now the <A> is the width of its background and the element itself is moved. So there is no possibility (fingers-crossed) of any misalignment between background and foreground.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 1 week ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Hover won't work in IE

Chris..S wrote:
Now the <A> is the width of its background and the element itself is moved. So there is no possibility (fingers-crossed) of any misalignment between background and foreground.

That's it exactly! You're a legend!! Laughing out loud

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference