CSS for special hover link

[pooh]

Greetings,

My last post dates from 2004!

I can't figure out why I can't get the graphic links on my new test page,

which is here: http://www.nondairycreamer.com/x_testing/index.html

to have the same effect for the hovering status as they do on my old home page, which you can see here:

http://www.nondairycreamer.com/index.html .

The text links on the new page have the desired effect, but not the graphic links.

When a user hovers over a link, one should see an animated dotted line underneath.

For some reason, on my new page, you actually can see the hover effect take place on the middle graphic, and I know that that logo is a GIF with some transparency!

I am using a completely different CSS file for the new file, and I just can't pin down the culprit that might be affecting the behavior.

The old CSS information is on the old index.html page itself:

And the new CSS file is an external stylesheet located here:
http://www.nondairycreamer.com/x_tes...irycreamer.css

Any clues?

Is there a CSS line in the stylesheet somewhere that is the culprit?

Could it have anything to do with the document types of these two pages being different?

And most importantly, mow might I find the way to create that effect for all my graphic links on my new page?

I know the old page has some sloppy and inconsistent code (please bear with me), but the issue for me concerns the functioning of the new page.

Thanks.