rollover image navigation

Hi –

I’m trying to create use roll over images for a means of main navigation. You can see my progress here — http://bitsllc.com/wp/about

Look in FF first and you will see the Online Store, Lifestyle, Flowrider, About” looking good with the rollover effect.

Now open the page in IE 7 – There are black text links appearing over the top of my image links. How do I hide these text links in IE? The color:transparent; doesn’t have an effect in IE. If I uncomment the filter:alpha(opacity=1); style, then the black text links will disappear in IE, but then my rollover image (beige text) will not work in IE.

Any suggestions are greatly appreciated.

Thanks,
Barb

Here is the style:

#mainnav .page_item a {
/* background: #e6974b url(../../themes/adrenalina/images/button.gif); */
display:block;
width: 184px;
color:transparent;
/* filter:alpha(opacity=1); */
/* opacity: 0.01; */
/* -moz-opacity:0.01; */
/* visibility:hidden; */
text-align: center;
text-decoration:none;
}