Stylesheets - IE7 max-width oddity -- any known solution?

Author

IE7 max-width oddity -- any known solution?

Ben Bacarisse

2007-03-30, 7:17 pm

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

2007-03-30, 7:17 pm

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

2007-03-30, 7:17 pm

Bergamot wrote:

> Ben Bacarisse 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, same as when
you set a width on them.

>
> 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

2007-03-30, 7:17 pm

Els wrote:
> Bergamot wrote:
>
> 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

2007-03-31, 7:16 am

Bergamot <bergamot@visi.com> writes:

> Ben Bacarisse wrote:
<snip>[color=darkred]
>
> 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

2007-03-31, 7:16 am

Els <els.aNOSPAM@tiscali.nl> writes:

> Bergamot wrote:
>
<snip>[color=darkred]
>
> 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

2007-03-31, 7:16 am

Ben Bacarisse wrote:

> Els <els.aNOSPAM@tiscali.nl> writes:
>
> <snip>
>
> 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.

>
> 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

2007-03-31, 7:20 pm

Els <els.aNOSPAM@tiscali.nl> writes:

> Ben Bacarisse wrote:
>
>
> *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.

>
> 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?

>
> 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

2007-03-31, 7:20 pm

Ben Bacarisse wrote:

[max-width triggers hasLayout in IE7]

>
> 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/