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)


In Internet explorer the menu seems to be pushed downwards:


in my CSS men part here:
Code:
		.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