12 replies [Last post]
lucadima
Offline
newbie
Last seen: 14 years 13 weeks ago
Joined: 2008-11-03
Posts: 3
Points: 0

Good morning.

I've some problem with css compatibility in IE6.

I notice some space between vertical div's.

The page is this: http://www.bernardini-amedeo.it/inrifacimento/index2.html

Can you help me to understand something? I've still found nothing on css and IE6 bugs.

Thanks.

scope1000
Offline
Regular
Last seen: 14 years 10 weeks ago
Joined: 2008-10-30
Posts: 33
Points: 0

Hi luca,

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!

liam.smart
Offline
Enthusiast
Dundee, Scotland
Last seen: 13 years 43 weeks ago
Dundee, Scotland
Joined: 2008-06-26
Posts: 164
Points: 0

Hi Lucadima,

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 Wink

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.

Many thanks,
Liam
www.liamsmart.co.uk

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 15 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I also couldn't tell which

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.

I'm no expert, but I fake one on teh Internets

lucadima
Offline
newbie
Last seen: 14 years 13 weeks ago
Joined: 2008-11-03
Posts: 3
Points: 0

More details

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.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 17 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

liam.smart wrote:IE6 has a

liam.smart wrote:

IE6 has a minimum height of 18px bug

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

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

lucadima
Offline
newbie
Last seen: 14 years 13 weeks ago
Joined: 2008-11-03
Posts: 3
Points: 0

Problem solved

Ok, thanks a lot.

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

Great resource this!!!

:thumbsup:

liam.smart
Offline
Enthusiast
Dundee, Scotland
Last seen: 13 years 43 weeks ago
Dundee, Scotland
Joined: 2008-06-26
Posts: 164
Points: 0

Lol, my word not good

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

Many thanks,
Liam
www.liamsmart.co.uk

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 15 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Tyssen: I think Liam was

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.

I'm no expert, but I fake one on teh Internets

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 15 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

@ liam: LAWLZ : )

@ liam: LAWLZ : )

I'm no expert, but I fake one on teh Internets

liam.smart
Offline
Enthusiast
Dundee, Scotland
Last seen: 13 years 43 weeks ago
Dundee, Scotland
Joined: 2008-06-26
Posts: 164
Points: 0

But still, if you create an

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:

Many thanks,
Liam
www.liamsmart.co.uk

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 15 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Yes, Ie6 will have a height.

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.

I'm no expert, but I fake one on teh Internets

liam.smart
Offline
Enthusiast
Dundee, Scotland
Last seen: 13 years 43 weeks ago
Dundee, Scotland
Joined: 2008-06-26
Posts: 164
Points: 0

Nah nah I knew it was all

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

Many thanks,
Liam
www.liamsmart.co.uk