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

Question

I know that such questions need to be asked constantly, but I have not yet found a solution to my problem.

Using FF, Opera and IE, which is in Windows 7 (I can’t remember what it is), the page looks exactly as it should, but in IE7 in Windows Vista there is a gap between my navigation bar and the rest of the page, which frankly forces it looks silly and the illusion of tabbed pages is lost.

I have a reset stylesheet to reset all elements so that there is no indentation, margins, etc. And FF, Opera and IE on Windows 7 create the page as it should, only IE7 (and I assume earlier versions of IE ) that doesn’t

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

This is from IE7 on Windows Vista:

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

And here is the link to the actual site in question: Figaro Ristorante

Any ideas anybody?

Thank you for your time.

Answer 1

I ran into this problem several times. Add this to your CSS:

#header img { vertical-align: bottom } 

IE has a funny bug before version 7, including version 7, where it will treat some spaces (empty node text, really) as real node text, and align the image as if the text was in an element.

Another option is 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 the way other browsers render the page.

Answer 2

IE on Windows 7 - IE8

I looked at it using IE7, and this gap seems to be related to the image in the div 'header'. If you look at it with a tool such as the IE Developer toolbar, you can see the borders around the objects on the page.

Sorry, I cannot insert an image, but I will try to describe it: there is a #text element after the image, which forcibly jumps to a new line of IE7. if you change the style to img to enable swim left; This fixes the problem for me.

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

Answer 3

This space is part of the text line where the menu image is displayed, since the image is an inline element, so it is placed in the baseline of the text line. A gap is the distance from the base line of the text to the bottom of the line, that is, the space used to suspend characters like "g" and "j".

Simple addition display:block; to image style solves the problem. It turns an image element from an inline element into a block element so that it does not fit in the base line of text, but as a separate element.

Answer 4

I encountered this problem a thousand times and finally, after using an overly complex fix after the fix, the answer is simple! (At least when <img> involved.) In the div that creates the space below it, add 'overflow: hidden;' to his css; Of course, you will need to set its height. So, if your div is 39 pixels high, this will keep it at 39 pixels, ignoring the extra spaces that IE likes to place under <img> s

Hope this helps.

Answer 5

There is not much useful information in this question (html or images that work). So here is a random guess.

I have had situations where line breaks or spaces between elements can create vertical space between elements. Try to place the closing and opening tags right next to each other and see if this fixes the problem.

Answer 6

Different browsers have different default fields and indents. In this case, I assume that the default IE7 settings drop you. There are two general solutions to the problem. You can set your own stock and add-on at html, body level:

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

or you can use conditional IE comments to load sepearte stylesheets for different versions of IE. The last thing I checked, conditional comments were considered the best solution, because the default settings for the browser provide some usefulness.

Answer 7

Jason is right that this is a mistake in how IE handles spaces in html ... treating it as node text. Although I do not find this unique to images. I believe that I have seen this behavior with divs as well. As a global change, you can try applying vertical alignment: bottom to both images and div. Although I do not know what could lead to chaos.

But a quick and dirty fix is ​​simply to remove the spaces. Kinda sucks, but change the material as follows:

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

<div>blorg</div>

For this:

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

/><div>blorg</div>

I warned that it was quick and dirty. But it works.