 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / March 2007IE7 max-width oddity -- any known solution?
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)?  SignatureBen. > 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. SignatureBerg >> http://bsb.me.uk/tmp/bug.html >> [quoted text clipped - 3 lines] > 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 SignatureEls http://locusmeus.com/ accessible web design: http://locusoptimus.com/ >> 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 SignatureBerg >>> http://bsb.me.uk/tmp/bug.html <snip> >>> Is there a known solution (other than avoiding max-width)? >> [quoted text clipped - 3 lines] > 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. SignatureBen. >>>> http://bsb.me.uk/tmp/bug.html > <snip> [quoted text clipped - 8 lines] > 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 [quoted text clipped - 5 lines] > 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. SignatureEls http://locusmeus.com/ accessible web design: http://locusoptimus.com/ >>>>> http://bsb.me.uk/tmp/bug.html >> <snip> [quoted text clipped - 10 lines] > > *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 [quoted text clipped - 9 lines] > 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. SignatureBen. [max-width triggers hasLayout in IE7] >>>> http://www.satzansatz.de/cssd/onhavinglayout.html >>> [quoted text clipped - 6 lines] > > 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. SignatureEls http://locusmeus.com/ accessible web design: http://locusoptimus.com/ >> 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. SignatureBen. |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.