Text showing over CSS background image in IE, not FF

I'm trying to get the Thesis theme working in Wordpress, and it's almost perfect. For the navigation menu I want to use images instead of text. My solution to this was to set a background image via css:

ul.menu .tab-2 a {background:url(images/myimage.jpg) no-repeat;background-color:transparent;width:81px;height:60px;margin:0px;padding:6px;border-style:none;}

This works fine everywhere but IE. You only see the image and not the text that Thesis is writing out for that nav item:

<li class="tab tab-2"><a href="http://www.mysite.com/about" title="About Us">About Us<!--[if gte IE 7]><!--></a><!--<![endif]--> 
<!--[if lte IE 6]><table><tr><td><![endif]--> 

In IE, however, t开发者_如何转开发he href text does show up over the background image. I suppose this is what I expected to happen, so I was pleasantly surprised to see it not working like that in every other browser.

What I'm trying to figure out is if there is a way to get the background image to show up on top of the href text, effectively blotting it out. I have tried hacking Thesis to suppress writing out the text, which works in all the menu items except one, and that is because I am writing out categories, not pages.

I really want to use Thesis' nav menu and not roll my own because I'm sure then I would have more troubles getting the drop downs to look nice in all browsers, and my css is just not that advanced. And I don't think there is a way to tell Thesis to use an image instead of text for the nav menu item.

I have been staring at this for hours and clearly am not thinking clearly about it anymore.

---

Try adding:

display:block;
text-indent:-5000em;
overflow:hidden;

... to your current rules.

Some folk prefer other ways to do image replacement, but this is the most common way IMO.