ok this is what I see happening.
In Mozilla, they almost line up perfectly, aside from the border issues created (my divs are actually 30% + 2px tall), so my adjustments are not pixel perfect... hence, each div is 2 lower than the last. This also begs the question, is their anyway to "add" percentages and pixels. I know there isn't, but man their should be.
So, for every consecutive div, mozilla places the "point of reference" at the bottom of the previous div, but keeping the *left* point at the edge of the containing div. So, the left: 0%, 20%, 40%, 60%, 80% works, in both browsers.
The nasty part is this. The top percentage: 0%, -30%, -60%, -90%, -120% works basically ok in mozilla. Essentially, that means the "point of reference" is getting pushed down with each div.
But, in IE, if I am not mistaken, the point of reference is only halfway down the div before it. So, with the 30% up, which is the height of one div, the second div is halfway up the first div, and the 3rd only has the border on the screen. 4th and 5th are above the screen.
So, does this rendering behavior make sense to you guys? Is mozilla or Ie doing what you would expect?
After reading the w3 specifcations again, I realize that mozilla's rendering makes sense. Of course, IE's doesn't. But IE is strange. I really can't explain it from any viewpoint. It seems to be taking a "midstance" completely incorrect and correct (which in web programing is still completely incorrect) [/edit]