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

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

• a container div (.testgrid), a second container (#a). div#a has a min-width specified, which triggers the ‘hasLayout’ property in IE 7 (simulated for IE 6, using zoom:1 in a conditional comment.
• Headings in div#a are pulled outwards, using a negative margin. In IE Win, they are clipped, unless given ’Layout’ as well.

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: October 19 2006 12:27:42 GMT.

• A [ La Chatte Noire ] development area
• [ contact ]
• [ sectionindex ]
• [ Empty Spaces ]