Gap above CSS menu in IE

[PHiL]

I have been developing a website over the passed few weeks and had it looking perfect in firefox, I finally took the plunge and viewed in it IE and it looked a mess (no suprise) :( So ive been going through adapting the CSS to make it few correctly in IE also.

The problem is there is a gap above my css menu and I cant figure out what is causing it? The site is not live so I have attatched some screen shots.

This is how it looks in Firefox (as it should tight against the header)
http://i32.photobucket.com/albums/d31/degiorgio1987/ff.png

In Internet explorer the menu seems to be pushed downwards:
http://i32.photobucket.com/albums/d31/degiorgio1987/ie.png

in my CSS men part here:

.menu li a {
display:block;
text-decoration: none;
text-indent: -1100px;
height:35px;
background-color: #53534b;
padding:0px;
background-repeat: no-repeat;
margin:0px;
}

If I change display:block to display:inline; the menu goes into the correct position, but then doesnt function correctly.

does anyone have any ideas what could be causing the gap?

Thanks