Negative top and left margins move the element up and left while negative right and bottom margins make following siblings move left and up.
The top value makes both the yellow and pink boxes move up (#pink follows #yellow). Then the bottom value create additional offset for the pink box that moves higher up.
In IE6 and 7, the only visible content is the one from the box which is higher in the stack (#pink).
Style the yellow box with:
margin: -1.4em 0 0;