IE7-/Win: negative margins, position:relative, hasLayout

1. m-l:-100px
2. m-l:-100px, h:0
3. m-l:-100px, h:1%
4. m-l:-100px, r
5. m-l:-100px, r, h:0
6. m-l:-100px, r, h:1%

In all the above six test cases there is a red box (with assigned width) containing a yellow box with margin-left: -100px. In IE/Win:

  1. The part of the yellow box protruding out of the container is not displayed in IE6-.
  2. The yellow box has hasLayout obtained with height:0 (zoom:1 for IE7); outside part still missing in IE6-.
  3. The yellow box has hasLayout obtained with height:1%; outside part still missing in IE6-. Moreover the box is 100px shorter (also in IE7.)
  4. The yellow box has position:relative; outside part missing (also in IE7.)
  5. The yellow box has position:relative and hasLayout obtained with height:0 (zoom:1 for IE7), it is displayed correctly.
  6. The yellow box has position:relative and hasLayout obtained with height:1%, outside part is displayed, but the box is 100px shorter (also in IE7.) In on other words: it doesn't fill the parent on the right, since it doesn't have the correct width. The result is the same as if the box had left:-100px, instead of margin-left:-100px
m-l:-100px, r, w:100%
r, l:-100px
r, l:-100px, h:0
r, l:-100px, h:1%

The above four test cases are all correctly displayed in IE/Win.

1. m-r: -100px
2. m-r:-100px, h:0
3. m-r:-100px, h:1%
4. m-r:-100px, r
5. m-r:-100px, r, h:0
6. m-r:-100px, r, h:1%

The above six test cases are like the first six, but using the right margin instead of the left one. Similar problems.

1. m:0 -100px
2. m:0 -100px, h:0
3. m:0 -100px, h:1%
4. m:0 -100px, r
5. m:0 -100px, r, h:0
6. m:0 -100px, r, h:1%

The above six test cases are like the first six, but with both left and right margins negative. Similar problems.

CSS tests home