Strange gap between elements in IE, not in F

Question

I know this kind of question must get asked all the time but I haven't found a solution for my problem yet.

Using FF, Opera and the IE that is on Windows 7 (can't remember what it is), the page looks exactly as it should, but using IE7 on Windows Vista, there is a gap between my navigation bar and the rest of the page which frankly makes it look stupid, and the illusion of tabbed pages is lost.

I have a reset stylesheet to reset all the elements to have no padding, margins etc and FF, Opera and the IE on Windows 7 produce the page as they should, it's only IE7 (and I'm guessing earlier versions of IE) that don't.

Here are 2 screenshots showing the problem, the first from FF/Opera/IE on Windows 7:

This one is from IE7 on Windows Vista:

alt text http://img43.imageshack.us/img43/7558/figarosiegap.jpg

And here is a link to the actual website in question: Figaro's Ristorante

Any ideas anyone?

Thanks for your time.

Answer 1

The IE on windows 7 is IE8

I've taken a look at it using IE7, and the gap appears to be because of the image in the 'header' div. If you look at it with a tool like IE Developer toolbar you can see the boundaries around the objects on the page.

Sorry i cant paste an image but i'll try to describe it: there is a #text element after the image which is being forced onto a new line by IE7. if you change the style on the img to include float: left; This fixes the problem for me.

Hope this helps! (Let me know if you need more clarity)