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.

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)

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

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

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

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

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

Hugo.

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.

It's probably a more logical approach to read with the flow of the document then 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.

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.

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.

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

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

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

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

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