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

Hugo

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

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).

I don't feel so bad after all Gary, I thought you had found a solution I knew it was a problem with the :hover 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.

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.

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

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

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

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.

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.

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

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

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.

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.

That's it exactly! You're a legend!!