absolute positioned element not getting 100% height

here's my code (a bit simplified)

<thisIsADiv id="wrapper" style="width:960px; margin:0 auto; position: relative;">
  &l开发者_开发知识库t;img src="img/bg/wrapper.jpg" alt="" width="960" id="bg" style="position:absolute; top:0; left:0; z-index:0; height:100%;" />
  <some more stuff></stuff>
</thisIsADiv >

here's my problem: if i give my image 100% height it works correctly in firefox/chrome (it stretches all allong its wrapper) while in explorer it inherits the page height!! causing an overheighted page. I tried with height=inherit but in firefox/chrome image doesn't stretch at all, in explorer the problem remains the same. Height=auto: the same as above in F/C + explorer doesn't stretch too.

Any idea? Thanks Vitto

Try setting a height to your wrapper div.

Edit: IE doesn't like z-index: 0; so set that to 1 and adjust your other indexes accordingly, also why not just use a background image in the style?

Instead of height:100% use bottom:0 on the image.

you need to specify height & width for absolute positioned elements, sometimes IE is correct in its display, also you think its wrong because of FF & Chrome (they fix you're code):

<div id="wrapper" style="width:960px; margin:0 auto;position: relative;">
  <img src="img/bg/wrapper.jpg" alt="" width="960" id="bg" style="position:absolute; top:0; left:0;height:theheightofyourimage;">
</div>

position: absolute automatically gets z-index 1.