CSS and transparent GIFs - tricky?

"display" property has a huge & confusing effect on my rollovers.

[lostincss]

I'm fairly new to CSS, but I'm trying to avoid old javascript rollovers with transparent gifs against a changing background color w/ a & a:hover states on the style sheet. The css I'm using looks like this:

.rollover a {
display: inline; padding: 0px; margin: 0px; background-color: #00FFFF;
}

.rollover a:hover {
background-color: #fccccc;
}

so far, I can only get the desired background colors to show through the transparency in the gifs when display in the a: state is set to "block" or "table-cell" - this is problematic for a number of reasons:

"table-cell" only seems to work in Mozilla browsers, and "block" prevents the gifs from laying side-by-side, as they are meant to, and leaves huge expanses of color across the browser window.

Setting the value to "inline" displays the gifs as I want them, and seems the most logical choice, but for some reason destroys the effect: the page background, not the background for the a: and a:hover properties, shows through the images. What am I doing wrong?

If it helps, heres the involved html:

<div class="rollover">
<a href="index.htm"><img src="graphics2/title1.gif" width="448" height="81" /></a><br /><a href="index.htm" class="menu1"><img src="graphics2/menu1.gif" /></a><a href="#"><img src="graphics2/menu2.gif" class="menu2" /></a><a href="dates.htm" class="menu3"><img src="graphics2/menu3.gif" class="menu3" /></a><a href="media.htm" class="menu4"><img src="graphics2/menu4.gif" class="menu4" /></a><a href="bio.htm" class="menu5"><img src="graphics2/menu5.gif" class="menu5" /></a><a href="links.htm" class="menu6"><img src="graphics2/menu6.gif" class="menu6" /></a>
</div>

[Stormfx]

You have to set the class of the <a> tag, not the <img> tag. :)

For example:

<a class="menu1"><img src="..." /></a>