Unwanted spaces between DIVs only in IE6

Hi luca,

I've only looked at your code quickly. Images, with a valid doctype, which youre using, will sometimes be the cause of what appear to be spaces between . To test for this as the likey cause of the issue add this to your css style sheet:

img {
display: block;
}

Osgood!

Hi Lucadima,

I hope you are referring to the space in the top div of the advert button thing on the left before I give you an explanation

IE6 has a minimum height of 18px bug. That means that any div, will always have a minimum height of 18px, with or without content. This has something to do with IE6 default font size being applied to divs that dont even have text... never mind its an easy fix.

To fix this there are 2 options. You need to give it a set height of say 10px and give it the style 'overflow:hidden'.

2nd option is to give it a 'font-size:0'. But this isn't a viable option if you actually need to have text inside of it. So use the 1st option.

Hope this hepls.

I also couldn't tell which space this is.

Osgood's referring to the (proper) behaviour of adding bottom space to images because images are inline, and inlines are expected to have text, and text has hangie-thingies-- descenders, the parts of letters that fall below the baseline-- pqygj for example.
Setting an image to display: block will fix this if this is the issue, although sometimes you don't want the image to be a block. Vertical-align: bottom then will also fix that.

Liam's right about IE treating line-height (or font-size) as the same as "height". Older Mozillas did this too, apparently, which is why the clearfix has the font-size: 0 AND visibility: hidden in it. This is IE6 and below only, IE7 does not have the line-height=height bug. Not sure about font-size though.

IE also sometimes has another "bug" which I have personally never been able to make, but other people seem to get it sometimes:
they'll have

And while that whitespace SHOULD just collapse to nothing (as the element is empty) sometimes IE keeps space until you do this:

or, I've seen once person write lists like this:

• blah blah blah
• blah blah blah
• blah blah blah

which you should never have to do, but I've seen it fix some people's extra space.

Hi all.

Thank you for all your answers.

I'll try your suggested methods, but first I'll give you some more details about my problem. You are right, I haven't done it before.

Well, there are 3 areas where the problem is visible, always only on IE6.

1) Between the end of the image header and the beginning of text with white background;

2) on the left blue column menu, where all menu voices, and the little blue spacer image on the topo of the blue column, are getting bigger space than their needings;

3) under the left menu, where the advice is divided in two separated pieces..... the white header and the other piece.

Thank you.

Luca.

Could you post a link to some documentation about this bug?

Ok, thanks a lot.

Putting img{ display: block; } in my style sheet was enough to solve the problem.

Great resource this!!!

:thumbsup:

Lol, my word not good enough? :blushing:

I cant remember how I came accross this bug but a quick search on Google and this site:

http://kempwire.com/ie/bizarre-empty-div-line-height-bug-in-ie6.html

Tyssen:

I think Liam was referring to this: http://kempwire.com/ie/bizarre-empty-div-line-height-bug-in-ie6.html

However it's not that IE6 keeps stuff at 18px, it's that this particular dude had his line-height set to 18px. Any other line-height would have given another "default" height for IE6 (at first). Though this guy tried changing the line-height later and I think his default (prolly in the body) was simply overriding it, but he solved his problem by setting the font size to zero instead.

Another reason I don't set font sizes (other than 100% for the IE resizing bug) or line-heights in my HTML now.

@ liam: LAWLZ : )

But still, if you create an empty div in IE6 and set height to 0, it will still have a height.

18px was a bit of a mis-judgement on my part but I'm sure its a few pixels (noticable anyways - maybe 4-6px?). The only time I ever come accross it is when using clearing div's. So I add overflow:hidden to make it invisible (font-size:0 does same job).

Maybe I'm wrong though, and in that case, will go and hide in a corner somewhere.... :bigoops:

Yes, Ie6 will have a height. The height is based on line-height (even if there's no text), which is the only reason why your 18px is wrong-- 18px isn't necessarily a particular page's line-height, but yeah it's usually at least a few pixels. If the font-size on that div is set to 0, then the line-height is also zero, so that's how the guy in the link solved the problem for himself.

You were on the right track, Liam. I hope you didn't think I was laughing at your post-- I thought it was really funny that we posted the same link at the same time by accident.

Though you are hopefully moving away from clearing divs? They caused Bush to be president and make the kids wear their pants down around their knees you know.

Nah nah I knew it was all light hearted so no offence taken