14 replies [Last post]
stunews
Offline
Regular
london
Last seen: 11 years 33 weeks ago
london
Joined: 2005-07-12
Posts: 45
Points: 0

Hi, don't know if anyone has encountered this method before, but in trying to implement it in a menu on a:hover it appears to 'stick' IE, check it out:
http://www.pantsproduction.com/dirty/
I don't know if anyone can help on this one but we're a bit stuck.
Any help/suggestions appreciated,
stunews

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

levison guilder image replacement & :hover

You'll need to explain 'Stick' viewed in FF & IE things look to be operating in exactly the same fashion.

One thing you should perhaps do is combine the on-off states into one image then on hover you just shift the image position this will give a smoother rollover as the second image does not need fetching, in fact that may be the problem for you in IE if your cache is set to check every visit or whatever it's called but it results in loading the image each time rather than actually working from the cache causing that pause between states.

You should state position co-ordinates for absolutes, IE likes it.

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

stunews
Offline
Regular
london
Last seen: 11 years 33 weeks ago
london
Joined: 2005-07-12
Posts: 45
Points: 0

levison guilder image replacement & :hover

when i say stick, i mean it changes on the rollover but doesn't change to the original image when you roll off of the button( this only happen when you move the cursor down from the menu when leaving the hot area- try it, position the cursor above the menu and then roll across it and down- it sticks)

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

levison guilder image replacement & :hover

Sorry still don't perceive the effect you're having.

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

stunews
Offline
Regular
london
Last seen: 11 years 33 weeks ago
london
Joined: 2005-07-12
Posts: 45
Points: 0

levison guilder image replacement & :hover

Hi Hugh, its a possibility that this isn't happening in your configuration however, in internet explorer 6 on my machine, if you rollover the anchor in the menu it loads a new image into the anchor tag span, if you then leave the anchor by dragging the cursor down it remains in the hover state instead of reverting back. This doesn't happen, however, if you exit the anchor by moving the mouse up.
If you (or anyone) are not experiencing this please let me know..
stu

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

levison guilder image replacement & :hover

You need to give #nav a:hover a rule as well for IE, e.g.:

#nav a:hover { text-decoration: none; }

Also, you can tighten up your code like so:

#nav a span { position:absolute; height:36px; cursor:pointer; }
#home span { background:url(http://www.pantsproduction.com/dirty/home_out.gif) no-repeat;  width:47px;  }
#home:hover span { background:url(http://www.pantsproduction.com/dirty/home_over.gif) no-repeat; }
#about span { background:url(http://www.pantsproduction.com/dirty/about_out.gif) no-repeat;  width:58px; }
#about:hover span { background:url(http://www.pantsproduction.com/dirty/about_over.gif) no-repeat; }
#work span { background:url(http://www.pantsproduction.com/dirty/work_out.gif) no-repeat;  width:45px; }
#work:hover span { background:url(http://www.pantsproduction.com/dirty/work_over.gif) no-repeat; }
#links span { background:url(http://www.pantsproduction.com/dirty/links_out.gif) no-repeat;  width:50px; }
#links:hover span { background:url(http://www.pantsproduction.com/dirty/links_over.gif) no-repeat; }
#contact span { background:url(http://www.pantsproduction.com/dirty/contact_out.gif) no-repeat;  width:83px; }
#contact:hover span { background:url(http://www.pantsproduction.com/dirty/contact_over.gif) no-repeat; }

And what would be even better would be using a single image for both on and off states (and use background-position to move it in and out of view) so that you don't get that delay when you first hover over the link waiting for the image to load.
Better still, use the one image for all the links like in this example: http://www.tyssendesign.com.au/examples/IR-navbar.html

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

levison guilder image replacement & :hover

Well Stu all I can say is that I am not experiencing this effect *shrug* Smile

Tyssen what a good idea a single image for both rollover states, similar to that which I mentioned in my first reply eh ! Wink

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

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

levison guilder image replacement & :hover

Hugo wrote:
Tyssen what a good idea a single image for both rollover states, similar to that which I mentioned in my first reply eh ! Wink

Sometimes I read threads backwards - skip to the end to find out if the problem's been solved or not and then work back. Got as far as you saying you didn't see the problem, so figured it hadn't and didn't really read the rest.

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

levison guilder image replacement & :hover

It's probably a more logical approach to read with the flow of the document then Smile did you test for that a:hover text-decoration? seemed to make matters slightly worse.

@Stu I did manage to recreate the problem your encountering, with difficulty, which makes me wonder still why I couldn't see it on your online page, locally I can make it occur I can also rectify it by defining the initial anchor state as #nav a:link not #nav a {} IE is so very touchy about links and little things, I'm still slightly worried about the overall construction of those rules IE is definitely quirky if you do not specify position with absolutes.

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

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

levison guilder image replacement & :hover

Hugo wrote:
It's probably a more logical approach to read with the flow of the document then Smile did you test for that a:hover text-decoration? seemed to make matters slightly worse.

It appears to be a similar problem to the one I had with my nav a while ago which Chris helped me with. IE needs something specified on the a:hover by itself to be able to apply the rules correctly to the a:hover span.

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

levison guilder image replacement & :hover

The problem you had which Chris and others! helped you with - although they went unmentioned in their efforts !!!- was iirc a known problem to do with background/colour, sadly one I knew of but overlooked at the time whilst looking too deeply for other problems.

I just wondered about the text-decoration as you seemed definite in that response rather than a "try this"

It's as usual a matter that IE does need things clearly defined and matched; yes it's a problem that rests with the pseudo classes, a number of approaches will sort the problem it seems , as I said earlier defining the rules on an actual :link psuedo class rather than a plain anchor will balance things as will setting background or color on the :hover as well as the old favourite setting :hover to zoom:1 to invoke hasLayout. What doesn't seem to work in this instance is using text-decoration.

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

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

levison guilder image replacement & :hover

Hugo wrote:
What doesn't seem to work in this instance is using text-decoration.

Works fine for me: http://www.tyssendesign.com.au/examples/hover-test.html

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

levison guilder image replacement & :hover

Hmm, I've yet to see this problem manifest itself online as it were, I would tend to go for adding the :link pseudo class though rather than text-decoration, does adding :link work as well on your example?

I'll overlook your overlooking of my comment on the lack of appreciation on your hover problem thread Smile

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 2 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

levison guilder image replacement & :hover

Hugo wrote:
Hmm, I've yet to see this problem manifest itself online as it were, I would tend to go for adding the :link pseudo class though rather than text-decoration, does adding :link work as well on your example?

If you mean changing #nav a { color:black; } to #nav a:link { color:black; } that doesn't seem to make any difference.

Hugo wrote:
I'll overlook your overlooking of my comment on the lack of appreciation on your hover problem thread Smile

Exactly what sort of response were you looking for. "I'm sorry for a small oversight in which I failed to acknowledge the efforts of every person who spent time looking into my problem"? It happens to me so often that I fail to recognise it as an issue anymore (and I don't just mean on this forum).

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

stunews
Offline
Regular
london
Last seen: 11 years 33 weeks ago
london
Joined: 2005-07-12
Posts: 45
Points: 0

levison guilder image replacement & :hover

cheers for your time and expertise guys, I'll pass this little solution on to my pal who was having trouble... I am guilty of specifying rules without the specific pyseudoclass which is why I didn't ferret out the problem so i'll include it from now on..
thanks again..