Rectangle 1
This page demonstrates anomalous behaviour of MSIE7 when using positioned elements with no offset specified.
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
To remedy the problem exhibited with MSIE7 on previous page the first element following the positioned squares (4 & 5) must be in the document flow and have no or zero left margin. If it also has zero height the positioned squares will asume their correct location.
On this page a zero height division has been used. Any block element can be used and the border plays no part. A div probably involves the least code. The next page replaces this with a zero height empty paragraph but a little more code is needed to ensure that the height is zero.
This workaround is equally effective with MSIE6 though this demonstration does not show it because square 5 appears in the document flow.
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.