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

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.

Answer 2

There's not much useful information (html or pictures that work) in this question. So, here's a random guess.

I've had situations where a line-break or spaces between elements can cause vertical space between elements. Try placing the closing and opening tags immediately next to each other and see if this corrects the issue.

Answer 3

I've run into this problem a thousand times, and finally, after using overly complicated fix after fix, the answer is simple! (At least when <img>'s are involved.) In the div that is producing a gap under it, add 'overflow: hidden;' to its css; you will need to set its height, of course. So, if your div is 39px high, this will keep it at 39px high, ignoring the extra whitespace IE loves to put under <img>s

Hope it helps.

Answer 4

Jason is correct that it's a bug in how IE handles whitespace in the html... treating it as a text node. Though I don't think it's unique to images. I believe I've seen this behavior with divs as well. As a global change you may try applying vertical-align:bottom to both images and divs. Though I don't know what mayhem that may produce.

But the quick and dirty fix is to just remove the whitespace. Kinda sucks, but change stuff like this:

<img src="blah" alt="" width="5" height="5" />

<div>blorg</div>

To this:

<img src="blah" alt="" width="5" height="5"

/><div>blorg</div>

I warned that this is quick and dirty. But it works.

Answer 5

Different browsers all have different default margins and padding. In this case, I'm guessing IE7s defaults are throwing you off. There are two general solutions to the problem. You can set your own margin and padding at the html, body level:

html, body {
    margin: 0;
    padding: 0;
}

or you can use IE conditional comments to load sepearte stylesheets for different versions of IE. Last I checked, the conditional comments were considered a better solution because browser defaults do provide some usefulness.

Answer 6

The gap is part of the text line where the menu image is, because the image is an inline element so it's placed on the baseline of the text line. The gap is the distance from the baseline of the text to the bottom edge of the line, i.e. the space used by hanging characters like 'g' and 'j'.

Simply adding display:block; to the style of the image solves the problem. It turns the image element from an inline element to a block element so that it's not placed on a base line of the text but as a separate element.