[thelist] CSS image replacement woes

[Garth Hagerman]

Hi-
I've been trying to use the css hover state image swap trick for the  
site navigation of an existing site, diggingdog.com. My most recent  
attempt is here:
<http://diggingdog.com/pages2/navtest2.html>
I reverse-engineered the basics from a functioning site, modifying to  
suit the needs of this one. All was going well, until I needed two  
images in a row. When I attach the moving background image to a div,  
all is well. When I attach the image to a span, the image moves down  
about 20px and only  the top of the image shows. When I used a div  
with display:inline, it behaves like I'd used a span. Ditto when I  
attach the image as an id on the li tag.
All of that is on my Mac. The results are the same in Firefox and  
Safari.
On IE/Windows, the two image row almost works, there's just a little  
purple showing, as if the image is placed up a few pixels.

Does anybody know what's going on here and how to fix it?

Some notes on the test page:
The first section works fine, as does the first row of the second  
section. The problem occurs in the second row of the second section.
The third row of the second section is non-moving images (for now).
Below the second section there's a sample of one of the movable  
images, displayed in its enirety, and a bunch more images which will  
be added to the second section when I get the two image row thang  
figured out.
The css stuff is in the head of this test page; I'll move it to the  
site's style sheet when it's operational.


    thanks in advance
    Garth






                            * * * * * * * * * * * * * * * *
                                my online portfolio

                           http://garthhagerman.com/