Image Rollovers In IE on PC

I use a mac and I am using some css to do some image rollovers. They look perfect in IE on my mac. However, on IE on the PC, the images have a border and are aligning very stange. Can someone take a look at this and let me know if there is a fix (hack)?!

http://eadesign.com/ea_comps/dreyer's/

CSS:
.grocery {	float: left; width: 170px; text-align: center;	margin: 0px; padding: 0px; border: none; }
.grocery a { display: block; background-image: url(images/nav_grocery.gif); height: 98px; text-align: center; width: 170px; border: none; }
.grocery a:hover { background-image: url(images/nav_grocery_over.gif); border: none; }

DIV:
<div class="grocery"> <a href="#"><img src="' + dir + 'images/spacer.gif" width="170" height="98"/> </a> </div>

Code (markup):

Thanks!

 

For the border issue...

In your header.js/search.js files some of the images you have linked DO NOT have border="0" specified.

Example: <div class="grocery"> <a href="#"><img src="' + dir + 'images/spacer.gif" width="170" height="98"/> </a> </div>

Look through your header.js/search.js and be sure to add border="0" to any images that don't already have it.

 

I love you. That was a easy fix. Thanks!

 

Did that fix the alignment issues as well?

 

Now I am getting a flicker. This seems like a common problem, I am reasearching it right now. Let me know if anyone know a quick fix.

 

I do know how to make a rollover using JUST css, no JAVASCRIPT! NO Flicker.

But it's a little complicated to explain, probably would be best off sending you the code.

Basically it involves just one image. You make your image double the width, paste the rollover image beside it, then have the padding minus half the length and when you rollover it shows the other half, hence no rollover cause the whole image was already loaded.

You can see this method used at www.rayedwards.com in the top navigation links. My work.