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

Square 6
margin-left: 240px

Each element within a wrapper division (brown dashed border) has a coloured outline and a height of 100px. Numbers indicate the order in which the code for the element appears in the source. The positioning scheme, if any, is indicated. Positioned squares are given some left margin simply to avoid complete overlap. The margin does not affect the behaviour. No element has an offset specified.

With standards compliant browsers each element appears in the expected normal flow position albeit removed from the flow when appropriate i.e. where the offset is not specified the in flow position is used instead.

Using MSIE7 this is not so. Squares 4 (absolute position) and 5 (fixed position), which precede non-positioned square 6 in the code, are offset by the left margin of square 6 (240px). The result is the same if square 6 is relatively positioned.

For a workaround see next page.

When we take into account the fact that MSIE6 treats fixed position elements as if they were relatively positioned an identical effect occurs with IE6. This suggests that IE7 has inherited the problem from IE6.


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.