An IE6 CSS float bug stumper

[Drew D. Saur]

Hello, all.

I have searched and searched and searched for details about what I am
experiencing, but I can't find a reference anywhere. I know IE has some
interesting bugs regarding floats - many of which the insane "display:
inline" will fix - but this one us a real stumper.

Visit:

http://www.macorchard.com/junk/bug/

The CSS file is located at:

http://www.macorchard.com/junk/bug/mo.css

....in IE6 - and then in any other modern browser - and you will see that
the left-floated element has space above and below it (margin space,
essentially) that IE insists on displaying. No amount of work - apart from
disabling the left float completely - seems to affect this.

Any help with this would be greatly appreciated. Thanks!

Drew

[Els]

Drew D. Saur wrote:

Hello, all.

I have searched and searched and searched for details about what I am
experiencing, but I can't find a reference anywhere. I know IE has some
interesting bugs regarding floats - many of which the insane "display:
inline" will fix - but this one us a real stumper.

Visit:

http://www.macorchard.com/junk/bug/

The CSS file is located at:

http://www.macorchard.com/junk/bug/mo.css

...in IE6 - and then in any other modern browser - and you will see that
the left-floated element has space above and below it (margin space,
essentially) that IE insists on displaying. No amount of work - apart from
disabling the left float completely - seems to affect this.

The reason is collapsing margins, and adding a border on div.App
solves it.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Drew D. Saur]

Els <el*********@tiscali.nl> wrote in
news:dr***************@locusmeus.com:

Drew D. Saur wrote:

Hello, all.

I have searched and searched and searched for details about what I am
experiencing, but I can't find a reference anywhere. I know IE has
some interesting bugs regarding floats - many of which the insane
"display: inline" will fix - but this one us a real stumper.

Visit:

http://www.macorchard.com/junk/bug/

The CSS file is located at:

http://www.macorchard.com/junk/bug/mo.css

...in IE6 - and then in any other modern browser - and you will see
that the left-floated element has space above and below it (margin
space, essentially) that IE insists on displaying. No amount of work
- apart from disabling the left float completely - seems to affect
this.

The reason is collapsing margins, and adding a border on div.App
solves it.

Thanks, Els! - I did as you stated and came up with
http://www.macorchard.com/junk/bug2/ - and while I do have a good grasp
of collapsing margins, I am stumped regarding why *adding* a border helps
in this case. If you have a moment to clarify further, I would appreciate
it. Thanks!

Drew

[Els]

Drew D. Saur wrote:

Els <el*********@tiscali.nl> wrote in
news:dr***************@locusmeus.com:

Drew D. Saur wrote:

Hello, all.

I have searched and searched and searched for details about what I am
experiencing, but I can't find a reference anywhere. I know IE has
some interesting bugs regarding floats - many of which the insane
"display: inline" will fix - but this one us a real stumper.

Visit:

http://www.macorchard.com/junk/bug/

The CSS file is located at:

http://www.macorchard.com/junk/bug/mo.css

...in IE6 - and then in any other modern browser - and you will see
that the left-floated element has space above and below it (margin
space, essentially) that IE insists on displaying. No amount of work
- apart from disabling the left float completely - seems to affect
this.

The reason is collapsing margins, and adding a border on div.App
solves it.

Thanks, Els! - I did as you stated and came up with
http://www.macorchard.com/junk/bug2/ - and while I do have a good grasp
of collapsing margins, I am stumped regarding why *adding* a border helps
in this case. If you have a moment to clarify further, I would appreciate
it. Thanks!

Thinking again, maybe it wasn't a legitimate collapsing margins issue
- that would have had IE do what you like, instead of the other
browsers.

It reminded me of collapsing margins, because adding a border to
div.App keeps the top margin of div.App from collapsing with the top
margin of body. If you compare your two examples, you can see that the
floated element doesn't change place, but the div.App doesn't extend
to the top of body anymore in the second example.
Borders and paddings stop margins from collapsing into the elements so
to speak.

The weird bit, is the bottom margin of the floated h2, which seems to
be effected by what happens to the top margin for some reason.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Drew D. Saur]

Els <el*********@tiscali.nl> wrote in
news:d0**************@locusmeus.com:

Thinking again, maybe it wasn't a legitimate collapsing margins issue
- that would have had IE do what you like, instead of the other
browsers.

It reminded me of collapsing margins, because adding a border to
div.App keeps the top margin of div.App from collapsing with the top
margin of body. If you compare your two examples, you can see that the
floated element doesn't change place, but the div.App doesn't extend
to the top of body anymore in the second example.
Borders and paddings stop margins from collapsing into the elements so
to speak.

The weird bit, is the bottom margin of the floated h2, which seems to
be effected by what happens to the top margin for some reason.

Yes, and that was really what "stumped" me to begin with! Frankly, in the
design that I had, the top margin wasn't causing a problem for me (the
samples were snipped from a larger context) - it was the space below, which
your border trick did indeed solve, but as I think you will agree, it is at
odds with the typical collapsing margin bugs.

It can't be that I have stumbled across an otherwise unknown IE bug, can
it? That seems impossible....

Does anybody else know what's going on here?

Drew

[Drew D. Saur]

In article <Xn**********************************@24.24.2.167> ,
"Drew D. Saur" <ds***@fusionproductions.com> wrote:

Els <el*********@tiscali.nl> wrote in
news:d0**************@locusmeus.com:

Thinking again, maybe it wasn't a legitimate collapsing margins issue
- that would have had IE do what you like, instead of the other
browsers.

It reminded me of collapsing margins, because adding a border to
div.App keeps the top margin of div.App from collapsing with the top
margin of body. If you compare your two examples, you can see that the
floated element doesn't change place, but the div.App doesn't extend
to the top of body anymore in the second example.
Borders and paddings stop margins from collapsing into the elements so
to speak.

The weird bit, is the bottom margin of the floated h2, which seems to
be effected by what happens to the top margin for some reason.

Yes, and that was really what "stumped" me to begin with! Frankly, in the
design that I had, the top margin wasn't causing a problem for me (the
samples were snipped from a larger context) - it was the space below, which
your border trick did indeed solve, but as I think you will agree, it is at
odds with the typical collapsing margin bugs.

It can't be that I have stumbled across an otherwise unknown IE bug, can
it? That seems impossible....

Does anybody else know what's going on here?

Drew

Any takers here?

Did I really find a new major bug in IE6? I find that hard to believe,
but if I did, I would like to report it....

Drew

--
The Mac Orchard - http://www.macorchard.com/
Essential Internet Applications since 1995

[Stephen Poley]

On Thu, 10 Nov 2005 18:57:38 GMT, "Drew D. Saur" <ds***@macorchard.com>
wrote:

In article <Xn**********************************@24.24.2.167> ,
"Drew D. Saur" <ds***@fusionproductions.com> wrote:

Els <el*********@tiscali.nl> wrote in
news:d0**************@locusmeus.com:

> Thinking again, maybe it wasn't a legitimate collapsing margins issue
> - that would have had IE do what you like, instead of the other
> browsers.

Yes, and that was really what "stumped" me to begin with! Frankly, in the
design that I had, the top margin wasn't causing a problem for me (the
samples were snipped from a larger context) - it was the space below, which
your border trick did indeed solve, but as I think you will agree, it is at
odds with the typical collapsing margin bugs.

It can't be that I have stumbled across an otherwise unknown IE bug, can
it? That seems impossible....

Does anybody else know what's going on here?

Any takers here?

Did I really find a new major bug in IE6? I find that hard to believe,
but if I did, I would like to report it....

Please don't get excited. If you can find a major area of IE that has
*no* bugs it will be time to get excited ...

Seriously: I haven't followed this in detail, but I had an incident with
IE a year ago when I had excessive spacing between elements. After
fighting it for a few hours I gave up - it didn't look too awful. While
tracking down another problem later I temporarily added a coloured
border to another unrelated element - and the spacing problem went away!
I was using a plain background, so I changed the border to the
background colour and left it there as a kluge. Whether this is related
to your problem here I'm not sure, but it could well be.

Really it's only worth documenting a bug if you can give a good analysis
of when it occurs (rather than a single example). Have you got that far?

And as for reporting it to Microsoft: save your breath. They don't give
a damn. (How long has peekaboo been around? Or 3px jog? Non-functioning
max-width? Non-functioning child selectors? A few hundred other things?)

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Tony]

>And as for reporting it to Microsoft: save your breath. They don't give

a damn. (How long has peekaboo been around? Or 3px jog? Non-functioning
max-width? Non-functioning child selectors? A few hundred other things?)

http://blogs.msdn.com/ie/archive/2005/07/29/445242.aspx

"In IE7, we will fix as many of the worst bugs that web developers hit
as we can, and we will add the critical most-requested features from
the standards as well. Though you won't see (most of) these until
Beta 2, we have already fixed the following bugs from
PositionIsEverything and Quirksmode:

Peekaboo bug
Guillotine bug
Duplicate Character bug
Border Chaos
No Scroll bug
3 Pixel Text Jog
Magic Creeping Text bug
Bottom Margin bug on Hover
Losing the ability to highlight text under the top border
IE/Win Line-height bug
Double Float Margin Bug
Quirky Percentages in IE
Duplicate indent
Moving viewport scrollbar outside HTML borders
1 px border style
Disappearing List-background
Fix width:auto"

They took their sweet time to do it, but it looks like it's happening -
finally

[Stephen Poley]

On 10 Nov 2005 14:09:10 -0800, "Tony" <to****@dslextreme.com> wrote:

And as for reporting it to Microsoft: save your breath. They don't give
a damn. (How long has peekaboo been around? Or 3px jog? Non-functioning
max-width? Non-functioning child selectors? A few hundred other things?)
http://blogs.msdn.com/ie/archive/2005/07/29/445242.aspx

"In IE7, we will fix as many of the worst bugs that web developers hit
as we can, and we will add the critical most-requested features from
the standards as well. Though you won't see (most of) these until
Beta 2, we have already fixed the following bugs from
PositionIsEverything and Quirksmode:

Peekaboo bug
Guillotine bug

<snip>
They took their sweet time to do it, but it looks like it's happening -
finally

Thanks for that - that had passed me by.

I'm afraid however that the phrase "the critical most-requested features
from the standards" more or less confirms that they have absolutely no
intention of reforming. Wouldn't the phrase "comply with standards" have
made a nice change?

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Tony]

"Stephen Poley" <sb******************@xs4all.nl> wrote in message
news:uv********************************@4ax.com...

On 10 Nov 2005 14:09:10 -0800, "Tony" <to****@dslextreme.com> wrote:

And as for reporting it to Microsoft: save your breath. They don't give
a damn. (How long has peekaboo been around? Or 3px jog? Non-functioning
max-width? Non-functioning child selectors? A few hundred other things?)

http://blogs.msdn.com/ie/archive/2005/07/29/445242.aspx

"In IE7, we will fix as many of the worst bugs that web developers hit
as we can, and we will add the critical most-requested features from
the standards as well. Though you won't see (most of) these until
Beta 2, we have already fixed the following bugs from
PositionIsEverything and Quirksmode:

Peekaboo bug
Guillotine bug

<snip>

They took their sweet time to do it, but it looks like it's happening -
finally

Thanks for that - that had passed me by.

I'm afraid however that the phrase "the critical most-requested features
from the standards" more or less confirms that they have absolutely no
intention of reforming. Wouldn't the phrase "comply with standards" have
made a nice change?

Given where they were, it would likely take quite a bit of recoding to fully
comply with standards. At least this is a step in the right direction - and
from what I read, they do seem to intend to continue in the direction of
standards compliance after this release.