CSS image rollovers

[liunx]

Kind of tricky this is.

Trying to use image rollovers and css. Have kind of mastered it in all browsers aside from Explorer which seems to add some space on top of each linked image.

see: <!-- m --><a class="postlink" href="http://www.cbc.ca/documentaries/beyondwords/index.html">http://www.cbc.ca/documentaries/beyondwords/index.html</a><!-- m -->

Here is the css that applies:

/* controls navigation */

#navigation {
position: absolute;
left: 0px;
top: 220px;
z-index: 2;
height: 107px;
width: 261px;
}

#navigation a img {
border: none;
margin: 0px;
padding: 0px;
}



#video {
background-image: url(gfx/video.gif);
background-repeat: no-repeat;
background-position: left top;
}

#photogallery {
background-image: url(gfx/photogallery.gif);
background-repeat: no-repeat;
background-position: left top;
}

#photographers {
background-image: url(gfx/photographers.gif);
background-repeat: no-repeat;
background-position:left top;
}

#resources {
background-image: url(gfx/resources.gif);
background-repeat: no-repeat;
background-position:left top;
}

#video a:hover {
display:block;
background-image: url(gfx/video_over.gif);
background-repeat: no-repeat;
background-position:left top;
}

#photogallery a:hover {
display:block;
background-image: url(gfx/photogallery_over.gif);
background-repeat: no-repeat;
background-position:left top;
}

#photographers a:hover {
display:block;
background-image: url(gfx/photographers_over.gif);
background-repeat: no-repeat;
background-position:left top;
}

#resources a:hover {
display:block;
background-image: url(gfx/resources_over.gif);
background-repeat: no-repeat;
background-position:left top;
}

Is there any way to get the navigation to appear correctly in IE?where? i dont see any image rolloverYour link is not working?#navigation a img {
border: none;
display:block;
}thanks very much, it worked beautifully.