IE windows – clipping of negative margined blocks in a ‘hasLayout’ container (IEW6 and IEW7)

heading

Some text here;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Some text here;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

heading – hasLayout in IE7 – and position:relative;

Some text here;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Some text here;
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

code

.testgrid {padding:10px;zoom:1}
#a {border: 2px solid #b00; padding:10px; margin: 0 8% 1em; min-width:200px;}
#a h4 {background: #ccc; padding:.2em .2em .2em 1em; border-left:1em solid #666; margin: .1em 10px 1em -7%;}
#t2 {zoom:1;position:relative;}/* position:relative optional for IE 7 */

#a p {margin: 0 3% 1em;}

Notes

This problem appears fixed in IE 7 RC 1, at least as far as this basic test case is concerned. Both headers are pulled out of the box. But proceed with caution. Inline elements that protrude out of the box are still clipped (see this test case when the parent element has ‘hasLayout’ set to true). Bruno Fassino has some more testcases that do not work correctly.

Last modified: September 26 2009 06:59:39 GMT.