Re: CSS Bug in IE7

howa wrote:

hi guy, pls help to test the following page...

[snip code]

the yellow color in the #main can't extend to full 100% width...

Because you didn't give #main 100% width.

this problem only exist in IE7, but okay with

1. IE6
2. Firefox 1.5
3. Opera 9

any idea for this? maybe a new bug from IE?

IE7 is shrink-wrapping the float (just like other browsers btw), but
not extending the width because of a child that wants 100% width.
If you take out the 100% width of the #main_a div, the other browsers
will do the same as IE7.

I'm sure some W3C-specs-guru will know which behaviour is technically
correct, but personally I'm not worried about this discrepancy between
IE7 and the other browsers. Just set 100% width on #main if that's
what you want, don't rely on the children to set the width of the
parent.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Els 寫道：

howa wrote:

hi guy, pls help to test the following page...

[snip code]

the yellow color in the #main can't extend to full 100% width...

Because you didn't give #main 100% width.

this problem only exist in IE7, but okay with

1. IE6
2. Firefox 1.5
3. Opera 9

any idea for this? maybe a new bug from IE?

IE7 is shrink-wrapping the float (just like other browsers btw), but
not extending the width because of a child that wants 100% width.
If you take out the 100% width of the #main_a div, the other browsers
will do the same as IE7.

I'm sure some W3C-specs-guru will know which behaviour is technically
correct, but personally I'm not worried about this discrepancy between
IE7 and the other browsers. Just set 100% width on #main if that's
what you want, don't rely on the children to set the width of the
parent.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

well, my concern is..

why FF, Opera & IE6 is full extending the width?

is that mean IE7 is the only correct browser in doing this (or others
are wrong)?

On 2006-11-03, howa <howachen (AT) gmail (DOT) com> wrote:
[snip]

why FF, Opera & IE6 is full extending the width?

Because 100% means "100% of the width of the containing block". The
containing block of #main_a is #main, and #main is an auto-width
normal-flow block box which means its computed width is the full content
width of its container, which is #page, which has a width set on it, of
900px.

So 100% means "100% of 900px" here, or 900px. And that's what you're
getting in Firefox.

is that mean IE7 is the only correct browser in doing this (or others
are wrong)?

No, IE7 is the only incorrect browser out of the three! Sounds like this
is actually a regression between IE6 and IE7.

Ben C wrote:

On 2006-11-03, howa <howachen (AT) gmail (DOT) com> wrote:
[snip]
why FF, Opera & IE6 is full extending the width?

Because 100% means "100% of the width of the containing block". The
containing block of #main_a is #main, and #main is an auto-width
normal-flow block box

Nope, it is floated, which means it would shrink-wrap in both Opera,
FF, IE6 and IE7 if it weren't for the content inside it being too
wide.

No, IE7 is the only incorrect browser out of the three! Sounds like this
is actually a regression between IE6 and IE7.

Where do the specs say that a floated shrink-wrapping box should
expand to 100% of its parent when it has a child that has a set width
of 100% but no content to fill up that width? (it is possible this is
written in the specs, but I haven't seen it afair)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

On 2006-11-03, Els <els.aNOSPAM (AT) tiscali (DOT) nl> wrote:

Ben C wrote:

On 2006-11-03, howa <howachen (AT) gmail (DOT) com> wrote:
[snip]
why FF, Opera & IE6 is full extending the width?

Because 100% means "100% of the width of the containing block". The
containing block of #main_a is #main, and #main is an auto-width
normal-flow block box

Nope, it is floated, which means it would shrink-wrap in both Opera,
FF, IE6 and IE7 if it weren't for the content inside it being too
wide.

You are right, and I was wrong. As you point out I did not observe that
#main was floated.

What we have in the OP's example is

page
main
main_a

page is a normal-flow block box. main is floated, and main_a is floated
and 100% of the width of main.

But main is width: auto, and main is the containing block for main_a.

width: auto on a float (which main is) means shrink-to-fit. In other
words it depends on the content.

The spec says (in Appendix F, under the width property)

"If the containing block’s width depends on this element’s width, then
the resulting layout is undefined in CSS 2.1."

No, IE7 is the only incorrect browser out of the three! Sounds like this
is actually a regression between IE6 and IE7.

No, that was rubbish. IE7 is well within the spec there. Actually I
think IE7 is doing what I think is the most sensible interpretation
(treat percentage width of shrink-to-fit container as auto since it's
makes no sense).

I have just tried this in Konqueror, and it's doing the same thing as
IE7.

Where do the specs say that a floated shrink-wrapping box should
expand to 100% of its parent when it has a child that has a set width
of 100% but no content to fill up that width? (it is possible this is
written in the specs, but I haven't seen it afair)

They don't. They explicitly leave it undefined.