CSS Image Gallery Rollover problem

[PaintedSwan]

Hello all :D

The rollover image displays perfectly in IE, whereas it displays 2 pixels to the left in Firefox. I have gone over it and over it, and was wondering if any of you could discern where the extra 2 pixels are coming from, and if there's any way I can get rid of them without affecting how it displays in IE.

You can view the page here: (edited out)

Plus I included the CSS file for simple viewing. (edited out)

Thanks in advance.

-Swanny

[PaintedSwan]

P.S. For what it's worth, I realize the Firefox vs. IE display issue has been posted about a lot...and I have researched the posts that I could find in the forums extensively, implementing whatever tricks I could, to no avail. I just hope it's possible to display my gallery the same regardless of browser, even if it means I need to approach my tables and divs completely differently. Any advice would be great (even if to tell me it's impossible). :)

[mBm]

use JS.

[PaintedSwan]

use JS.
Hi mBm...thanks for your reply. I appreciate your sentiment, but the whole point of my project is to make a CSS-based gallery. Thanks anyway, though.

[PaintedSwan]

For anyone new to CSS like me and have a similar problem, research CSS hacks on the internet (I didn't even know they existed before now). As of now that's the only answer I see.