Background position of nested div on ie6

Two div's, one is a parent, one is a child, ie:

<div id="top">
<div id="bottom">
<p>content</p>
</div>
</div>

both are styled with transparent png backgrounds:

#top { background: transparent url(top.png) 50% 0 no-repeat; }
#bottom { background: transparent url(bottom.png) 50% 100% no-repeat; }

#top displays its background properly, but #bottom seems to have its background 
position set to 50% 0, like #top - it's background image does not start at the 
bottom of the div, no matter how large the content makes both divs.

Using ie8.js, ie 6.0. Everything works fine in Firefox 3.6.4

Original issue reported on code.google.com by TwoVect...@gmail.com on 25 Jun 2010 at 6:36

antirek / ie7-js

Background position of nested div on ie6 #264