tests: ‘hasLayout’ and shrinkwrapping (IEW6 and IEW7)

1. Vertical list: floating <ul>, non-layout <a>

2. Vertical list: Floating <ul>, layout <a>

3. Horizontal list: floating <li>, layout <a>

Style

.testgrid ul {margin:0; padding:0; list-style:none;}
.testgrid ul a {margin:1px; display:block; padding:.5em}
.testgrid ul a:hover {background:#fff;}

ul.vertical {float:left; background: #cbba65; padding: 0.5em; list-style: none; } 
.nonlayout a { border: 2px solid #080; background:#dfd;} /* test 1 */
.layout a { zoom:1; border:2px solid #008; background:#ccc} /* test 2 */

ul.horizontal {padding:.5em; background; #65cbcb;} /* should not be visible */
.horizontal li {float:left; margin:2px;}
.horizontal a { height:1.5em; border:2px solid #d00; background:#ddd}

Notes

• Test 1 – IE Windows displays almost correctly, but has extra space at the bottom of each <li> (list whitespace bug).
• Test 2 – The list whitespace bug is fixed, but the floating <ul> cannot shrink-wrap anymore, because the <a> extends to the full available width when ‘haslayout’ is applied.
• Test 3 – The <a> extends to the full available width when ‘haslayout’ is triggered. The floating <li> cannot shrink–wrap anymore. The parent block (.testgrid) expands wider than it should, resulting in an horizontal scrollbar.

This problem appears mostly fixed in IE 7 RC 1. The shrinkwrapping effect is respected in all 3 test cases. The 'white-space' bug is also fixed.But there are still cases where strange effects can be seen, especially when not all descendant elements have layout.

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

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