CSS change of background link (longish)

In an attempt to be well behaved and use CSS in as full a way as possible, I thought I'd try a nifty trick to get away from sliced images. I have a background image with some image links superimposed on it, which should change when rolled over. My nifty trick (I thought) was to place a transparent gif in a <div>, wrapped in an <a> and define the div with the background as the image I want for the link, like so:

div#index {
position: absolute;
top: 25px;
left: 23px;
background: transparent url(index.gif) no-repeat;
}

That much works beautifully, and the page background image shows through just as I hoped. So the next stage is the rollover, which I've done like this:

div#index a:hover {
background: transparent url(index-over.gif) no-repeat;
}

And that's where I come partly unstuck. To my surprise, IE seems to be the browser that behaves as I expect: both 5.2 in Mac OS X (my main platform) and 5.5 in Windows (I don't have immediate access to v.6). However, in Gecko-based browsers (eg Camino and Netscape 7) and Apple's Safari, it almost works but not quite: the rollover image is offset downwards by about 3 or 4 pixels and I can't for the life of me firgure out why! Horizontally it's correct, just down a bit vertically.

Given that IE is usually the baddie in these circumstances, I can't help feeling I have actually done something wrong, which IE happens to accomodate, but I've checked everything I can think of (eg that the two images are exactly the same dimensions, there's nothing else in the style sheet that might affect it, etc.) and come up blank.

Any clues, anyone?