8 replies [Last post]
cosmocanuck
cosmocanuck's picture
Offline
Enthusiast
Vancouver, Canada
Last seen: 6 years 9 weeks ago
Vancouver, Canada
Timezone: GMT-7
Joined: 2007-10-08
Posts: 56
Points: 37

Hi gang,

I have truly dug deep and studied the responses to this same issue on this forum (and elsewhere), but am still wrangling with the "whatever:hover" solution to IE rollovers. Here's the test site in question:

http://www.adamabrams.com/spaprofits/

On my local machine, in IE, the main categories' rollover action works fine - the stones turn red on rollover, and on each section, the appropriate one remains highlighted.

Online, though, it just... doesn't.... work. The links work but no rollover action whatever, and no highlights either, naturally.

Since this forum is where I found the most accessible and detailed discussion of problems with "whatever:hover", I'm hoping someone here can point out the (no doubt obvious to all but me) error of my CSS ways...

Thanks!
adam

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

- you have both

- you have both whatever:hover and sfHover in your code. Choose one.
- the conditional you are using for whatever:hover is set for IE rather than IE lte 6. IE7 doesn't need whatever:hover.
- whatever:hover (and/or sfHover) are working, the submenu appears.

The rollover is caused by the :hover style on the anchor. IE6 handles that, neither whatever:hover, nor sfHover are attempting to replace the anchor hover rules.

The problem you are having in IE6 is because IE6 can't handle png's with alpha transparency. The fix you are using is only able to give IE6 some of the functionality available to other browsers. Background-positio can't be accomplished. For IE6 you will need to do a png rollover with separate images.

You also should take care when specifying your anchor and anchor:hover style rules. Make sure you use the same selector to avoid any specifity problems.

You have:

#nav li a {
#nav a:hover {

you would be better with either

#nav a { or #nav li a {
#nav a:hover { #nav li a:hover {

cosmocanuck
cosmocanuck's picture
Offline
Enthusiast
Vancouver, Canada
Last seen: 6 years 9 weeks ago
Vancouver, Canada
Timezone: GMT-7
Joined: 2007-10-08
Posts: 56
Points: 37

Thanks for the feedback,

Thanks for the feedback, Chris.

You're right, I have two scripts to achieve rollover - whoops. But I see I was unclear about my problem - not the rollover action, which works fine, but the background-image positioning. Although you said:

Quote:
Background-position can't be accomplished. For IE6 you will need to do a png rollover with separate images.

...the background-positioning does work when viewing my page locally in IE6 - even with both the rollover fixes removed! (Though the submenu fails in this case as expected.) Why on earth would it work locally but not online? I would think if IE's incapable of dealing with background-positioned images, it would never work...

(Strangely, the separate fix for the alpha transparency (iepngfix.htc) does not work locally, but does work online. Bizarre!)

I assume the following makes no difference but will mention it just in case it's relevant: I'm running XP on an Intel Mac using VMWare's emulator. I can't imagine, though, that this would cause IE6 to behave any differently? (It better not, because this is my way to check my work in IE6 at long last...)

Thanks,
adam

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

You've quoted me out of

You've quoted me out of context, and you have inadvertently answered your own questions.

Of course there is some link between the png fix working and the rollover not working and vice versa Wink. Those circumstances match exactly with what I said, which was (and paraphrased) pngfix(*) is incompatible with background-position. So if pngfix is working, background-position will have no effect. Which is what you are seeing.

Returning to my first post, you need two images.

(*) There is no need to try the alternative fixes for IE6 & PNGs. There is only one fix. All the alternatives are different methods for automating the dynamic conversion of a normal webpage/CSS with PNGs into one that allows IE6 to show PNGs with alphatransparency. The only way to get IE6 to show alphatransparency is with the IE only CSS property "filter" and its AlphaImageLoader transform. Filter is more akin to a foreground image than a background image. You can't do any repeating (but you can stretch) or positioning.

cosmocanuck
cosmocanuck's picture
Offline
Enthusiast
Vancouver, Canada
Last seen: 6 years 9 weeks ago
Vancouver, Canada
Timezone: GMT-7
Joined: 2007-10-08
Posts: 56
Points: 37

I've nearly got it, but...

I've nearly got it, but... still not quite.

I finally see what you mean about background-position not being attainable alongside transparency. That's OK, I can deal with using a standard image swap for the main menu... but that still isn't working.

http://www.adamabrams.com/spaprofits/index.html

I'm now using pngfix to achieve transparency, and for the rollover awareness, I'm using sfHover. I have revised my main menu graphics so they don't depend on background-position, instead it's standard image swapping between 2 different images.

But, though I now get transparency and rollover awareness (the submenu under "Services" appears as it should), on the main menu, I'm not getting the image swap as you roll over the main menu. (The image does swap as intended to indicate the current section, however.)

Am I still doing something wrong?

Thanks a bunch!
adam

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

Your selector is

Your selector is incorrect

li#nav li a:hover => ul#nav li a:hover

cosmocanuck
cosmocanuck's picture
Offline
Enthusiast
Vancouver, Canada
Last seen: 6 years 9 weeks ago
Vancouver, Canada
Timezone: GMT-7
Joined: 2007-10-08
Posts: 56
Points: 37

Thanks, but when I do that,

Thanks, but when I do that, the Services submenu acquires the red-stone background image upon rolling over one of its items. And still no rollover swap. But I don't care so much about that right now actually: I have a bigger, newer problem! Well, two possibly related problems actually.

When rolling over the Services submenu, the items have the "red stone" background image applied to them (that should only appear on the top level menu). I thought that this CSS would ensure that didn't happen:

#nav li li a {
display: inline;
width: auto;
height: auto;
background: none;
}

But evidently not. I have tried many things but can't get rid of them!

Even worse: when in the Services section, the Services submenu piles up vertically in a stack! Actually, it first displays correctly (just like when you roll over Services on any other page), then when all the "stone" graphics load, they jump into a vertical stack.

In a word... arrrgh!!! What have I mucked up now....? 8^)

adam

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

:hover is a pseudo class and

:hover is a pseudo class and counts the same as a class in the specifity wars (:first-letter, :after are pseudo elements and count the same as tag names).

ul#nav li a:hover = 1:1:3 (id:class:element)
#nav li li a = 1:0:3

the top one wins.

put another selector for the same rule with both the ul and the hover, e.g.

ul#nav li li a:hover,
#nav li li a {
... your styles
}

cosmocanuck
cosmocanuck's picture
Offline
Enthusiast
Vancouver, Canada
Last seen: 6 years 9 weeks ago
Vancouver, Canada
Timezone: GMT-7
Joined: 2007-10-08
Posts: 56
Points: 37

Thanks for the specifics on

Thanks for the specifics on specificity. Actually, I'd forgotten that the submenus were of course "inheriting" the background image from the top-level menus unless told otherwise; I added a specific style to them to turn that off. And the constricted width of the submenu was due to its width being set to "auto" - which maxed it out at the width of its parent

  • . I gave it a generous pixel width instead.
  • All solved! I have a couple of other issues but will post separately as they're quite unrelated to the rest of this thread.

    Many, many thanks for your help and guidance!

    adam