Rectangle 1
This page demonstrates that with MSIE7 a positioned element can destroy the margin of an in-flow element.
All divs have coloured borders. Positioned divs have background colour and blue borders.
Square 2
Square 3 relative
margin-left: 20px
Square 4 abs'te
marg-left: 60px
Square 5 fixed
margin-left: 100px
Red line is the border of a
division with no margin (0px height)
The code for this appears immediately before that for square 6
(The division holds this text but this does not alter the response)
Square 6
margin-left: 240px
margin-top: 100px
The problem exhibited with MSIE7 on previous page is eliminated if the division (square 6), whose top margin was ignored, is preceded by an element which is in the document flow but which has no height. In this case a division is used.
This workaround is equally effective with MSIE6 though this demonstration does not show it because of other bugs in MSIE6
Lipsum dolor sit amet, consectetuer adipiscing elit. Vivamus pulvinar, magna id mattis varius, turpis nibh imperdiet quam, vel condimentum velit sem id elit. Morbi sit amet ante. Curabitur sed ligula convallis mauris pulvinar vulputate. Donec dictum. Curabitur convallis turpis et velit. Pellentesque libero leo, ultrices porta, ullamcorper id, rutrum at, mi. Suspendisse lobortis, ipsum et rhoncus venenatis, est mi malesuada massa, vitae mollis turpis purus nec lacus. Nam vel erat in ipsum scelerisque imperdiet. Phasellus tempor. Duis enim risus, facilisis ut, semper eget, porta at, sem. Mauris tristique, orci sit amet scelerisque aliquet, nunc eros dictum wisi, non auctor arcu turpis id dui. Cras turpis erat, viverra quis, venenatis vitae, malesuada dignissim, nulla. Nam sed eros in mi malesuada semper. Proin mi diam, gravida sit amet, molestie sed, rhoncus ultricies, nisl. Mauris faucibus vehicula mauris.
Etiam sed mi vitae augue volutpat consectetuer. Cras orci purus, blandit et, semper condimentum, ornare in, lacus. Morbi enim. Nulla vitae felis non sem feugiat dignissim. Nullam pretium est non massa. Curabitur lacinia sollicitudin wisi. Duis malesuada venenatis sapien. Pellentesque quis felis. Aenean et nisl. Sed consectetuer, enim sed gravida volutpat, urna libero ullamcorper tortor, tincidunt viverra lorem nisl fermentum risus. Sed eu massa. Quisque ultricies. Vestibulum nisl libero, fermentum ut, posuere eget, commodo vitae, pede. Donec euismod vehicula leo. Duis a massa. Aenean vestibulum condimentum nibh. Donec leo lorem, elementum et, scelerisque pellentesque, tempus ut, libero. Nulla facilisi. Vivamus ante nibh, blandit eu, volutpat et, faucibus quis, libero.
Quisque ornare, orci id malesuada interdum, risus urna sodales neque, porttitor tincidunt massa neque vel pede. Vestibulum ipsum neque, semper eu, luctus id, faucibus aliquam, tellus. Nam id augue sed quam viverra tristique. Suspendisse est massa, ultricies eget, ullamcorper sit amet, iaculis pulvinar, tellus. Vestibulum dapibus porta libero. Morbi vel leo et nunc volutpat blandit. Donec vehicula sem eget turpis. Mauris diam turpis, sagittis nec, adipiscing a, fringilla et, nibh. Morbi commodo elit id mauris. Praesent consequat libero a est. Nulla facilisi. Suspendisse eleifend. Phasellus interdum lorem ac felis. In hac habitasse platea dictumst. Quisque ipsum.