Strange gap between
elements in IE, not in FF or Opera

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.

Accepted Answer

I've run into this problem a bazillion times. Add this to your CSS:

```
#header img { vertical-align: bottom }
```

There's a funny bug in IE up to and including version 7 where it will treat some whitespace (an empty text node, really) as a real text node, and align the image as if there was text in the element as well.

Another option would be to declare the image as a block level element:

```
   #header img { display: block }
```

This CSS is safe to add to your global file, it will not interfere with how other browsers render the page.

Strange gap between <div> elements in IE, not in FF or Opera

Solution

Problem