Forum Moderators: not2easy
here's one scenario I did think of by way of a visual example:
A Heading with it's own decoration next to a floated image
(image feigned using a faux div for demo)
expected behaviour:
The heading has borders and/or background which go underneath the float and can't be margined from img
IE's behaviour:
Heading is margined from float and gets enclosed by its own decoration because hasLayout=true which invokes buggy float model
HTML:
<div class="img">floated image</div>
<h1>Heading</h1>CSS:
.img {width: 300px; height: 70px; background: #dad; float: left; margin: 5px 10px;}
h1 {
background: #abc; color: #fff; border: 1px solid #000; text-align: center;
line-height: 78px;
height: 78px; /* hasLayout=true trigger */
/* overflow: auto; */
}
imagine you want the picture that IE is painting - to achieve the same for FF/Opera uncomment the overflow property.
I've only tested in the IE's (but that would be 'working' anyway because it has hasLayout=true triggered by the height) Firefox 2 and Opera 9.5 - haven't tested Safari or others
I don't know if this is correct expected behaviour from this use of the overflow property, the closest I found is that the CSS3 recs for calculating the height of an element when overflow computes to visible [w3.org] (think of it in reverse) now includes widths, whereas the same bit in CSS2.1 [w3.org] recs only relates to height - it is that bit in CSS2.1 that allows elements with overflow (anything but visible) to contain floats..
I *think* I found a use in reply to this thread [webmasterworld.com] - namely when it's a list next to the float and you want the bullets under control
thought I'd leave this in case any of you get bored over the weekend and fancy trawling to find out more, or indeed if you know why already or what this could be useful for I'd like to hear your thoughts and ideas
-Suzy
I truly hate "hasLayout". The mere concept is an insult.
