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

Answer 1

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 2

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 3

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 4

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)

Answer 5

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.

Answer 6

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.