IE7 max-width oddity -- any known solution?

[Ben Bacarisse]

After finding a page on an existing site that was not being displayed
correctly by IE7, I have boiled the problem down to the following
simple example:

http://bsb.me.uk/tmp/bug.html

With max-width applied to the paragraphs, the second one is positioned
as if it had "clear: right" applied (but of course it does not).
Other tested browsers behave as I'd expect.

This looks to me like an IE7 bug. Is it know? Is there a known
solution (other than avoiding max-width)?

--
Ben.

[Bergamot]

Ben Bacarisse wrote:

>
http://bsb.me.uk/tmp/bug.html

This looks to me like an IE7 bug.

IE7's max-width handling is less than perfect. If you want to see
something even more strange, try max-width on list items. The list
markers end up in an odd place.

Is there a known solution (other than avoiding max-width)?

You could set max-width on the container that holds the paragraphs
instead, but that won't work in all cases. Depends on the design.

--
Berg

[Els]

Bergamot wrote:

Ben Bacarisse wrote:

>>
http://bsb.me.uk/tmp/bug.html

This looks to me like an IE7 bug.

IE7's max-width handling is less than perfect. If you want to see
something even more strange, try max-width on list items. The list
markers end up in an odd place.

I tried that out, but all that happens is they disappear, same as when
you set a width on them.

>Is there a known solution (other than avoiding max-width)?

You could set max-width on the container that holds the paragraphs
instead, but that won't work in all cases. Depends on the design.

Or you could just take the picture out of the first paragraph, and
place it before it.
What is happening in the above example, is that the first paragraph
gets extended to encompass the float inside, because of the set
min-width. Basically IE7 does the same as if you'd given a width
instead of a max-width. In IE (not just 7), a width or height gives an
element "layout".
http://www.satzansatz.de/cssd/onhavinglayout.html
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

[Bergamot]

Els wrote:

Bergamot wrote:

>>
IE7's max-width handling is less than perfect. If you want to see
something even more strange, try max-width on list items. The list
markers end up in an odd place.

I tried that out, but all that happens is they disappear

Not always. It may also depend on left margin or padding, or whether
max-width is set on the ul or li element. I've seen cases where the
markers disappear altogether, but also where the marker ends up aligned
with the last line in the list item.

this is a list item that
wraps to multiple lines
and the marker is on the
* last line

--
Berg

[Ben Bacarisse]

Bergamot <be******@visi.comwrites:

Ben Bacarisse wrote:

> http://bsb.me.uk/tmp/bug.html

<snip>

>Is there a known solution (other than avoiding max-width)?

You could set max-width on the container that holds the paragraphs
instead, but that won't work in all cases. Depends on the design.

Thanks. That certainly stops the "peculiar" behaviour. I'll see if I
can do that in the real site.

--
Ben.

[Ben Bacarisse]

Els <el*********@tiscali.nlwrites:

Bergamot wrote:

>Ben Bacarisse wrote:

>>>
http://bsb.me.uk/tmp/bug.html

<snip>

>>Is there a known solution (other than avoiding max-width)?

You could set max-width on the container that holds the paragraphs
instead, but that won't work in all cases. Depends on the design.

Or you could just take the picture out of the first paragraph, and
place it before it.

Yes but that, of course, does not position that image in the same
place, and requires extra markup to make a valid page.

What is happening in the above example, is that the first paragraph
gets extended to encompass the float inside, because of the set
min-width. Basically IE7 does the same as if you'd given a width
instead of a max-width. In IE (not just 7), a width or height gives an
element "layout".
http://www.satzansatz.de/cssd/onhavinglayout.html

Ah. I am still confused but I can see the fog much more clearly!
Elements with "layout" auto clear in IE, it seems. Sadly, most people
seem to need hacks to give an element layout rather than prevent one
from gaining it.

--
Ben.

[Els]

Ben Bacarisse wrote:

Els <el*********@tiscali.nlwrites:

>Bergamot wrote:

>>Ben Bacarisse wrote:

http://bsb.me.uk/tmp/bug.html

<snip>

>>>Is there a known solution (other than avoiding max-width)?

You could set max-width on the container that holds the paragraphs
instead, but that won't work in all cases. Depends on the design.

Or you could just take the picture out of the first paragraph, and
place it before it.

Yes but that, of course, does not position that image in the same
place, and requires extra markup to make a valid page.

*one* extra div - I personally wouldn't worry about that.

>What is happening in the above example, is that the first paragraph
gets extended to encompass the float inside, because of the set
min-width. Basically IE7 does the same as if you'd given a width
instead of a max-width. In IE (not just 7), a width or height gives an
element "layout".
http://www.satzansatz.de/cssd/onhavinglayout.html

Ah. I am still confused but I can see the fog much more clearly!
Elements with "layout" auto clear in IE, it seems.

I suppose you could call it that (auto clear), but it is more than
that - layout makes the element rectangular with 'closed borders' -
keeping floats inside instead of sticking out.

Sadly, most people
seem to need hacks to give an element layout rather than prevent one
from gaining it.

Yup. BTW, to get what I think you want, you would need to also use
that one extra div to set the max-width on (as Berg suggested), as the
paragraphs would still have layout if you set the max-width on them,
meaning that if a paragraph is taller than the floated image, it will
not wrap below the image, but remain one rectangular block, with the
image beside it.
Only the next paragraph would go wider, below the image.

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

[Ben Bacarisse]

Els <el*********@tiscali.nlwrites:

Ben Bacarisse wrote:

>Els <el*********@tiscali.nlwrites:

>>Bergamot wrote:

Ben Bacarisse wrote:
>
http://bsb.me.uk/tmp/bug.html

<snip>

>>>>Is there a known solution (other than avoiding max-width)?

You could set max-width on the container that holds the paragraphs
instead, but that won't work in all cases. Depends on the design.

Or you could just take the picture out of the first paragraph, and
place it before it.

Yes but that, of course, does not position that image in the same
place, and requires extra markup to make a valid page.

*one* extra div - I personally wouldn't worry about that.

No, neither would I. It is moving the image outside of the <p>'s
margins that might be an issue. I need to check the details in the
real design.

>>What is happening in the above example, is that the first paragraph
gets extended to encompass the float inside, because of the set
min-width. Basically IE7 does the same as if you'd given a width
instead of a max-width. In IE (not just 7), a width or height gives an
element "layout".
http://www.satzansatz.de/cssd/onhavinglayout.html

Ah. I am still confused but I can see the fog much more clearly!
Elements with "layout" auto clear in IE, it seems.

I suppose you could call it that (auto clear), but it is more than
that - layout makes the element rectangular with 'closed borders' -
keeping floats inside instead of sticking out.

I was just borrowing the term from the URL your posted. Does this
"non-intersecting rectangles behaviour" have an agreed name?

>Sadly, most people
seem to need hacks to give an element layout rather than prevent one
from gaining it.

Yup. BTW, to get what I think you want, you would need to also use
that one extra div to set the max-width on (as Berg suggested),

Yes indeed. And the real-world layout from which this is drawn already
has the extra div so it is just a case of seeing which one of (a)
moving the max-width or (b) moving the <img>s is simpler and/or less
disruptive to the overall layout.

--
Ben.

[Els]

Ben Bacarisse wrote:

[max-width triggers hasLayout in IE7]

>>>http://www.satzansatz.de/cssd/onhavinglayout.html

Ah. I am still confused but I can see the fog much more clearly!
Elements with "layout" auto clear in IE, it seems.

I suppose you could call it that (auto clear), but it is more than
that - layout makes the element rectangular with 'closed borders' -
keeping floats inside instead of sticking out.

I was just borrowing the term from the URL your posted.

Ah, missed that :-)

Does this "non-intersecting rectangles behaviour" have an agreed name?

Other than 'hasLayout' (which doesn't mean much to many people), I
don't know really. But we could of course agree on "non-intersecting
rectangles behaviour" if no one can come up with a shorter term :-)

And the real-world layout from which this is drawn already
has the extra div so it is just a case of seeing which one of (a)
moving the max-width or (b) moving the <img>s is simpler and/or less
disruptive to the overall layout.

Yup - each design needs its own solutions to common problems.

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