Despite my knowledge of the infamous ie7 z-index bug, I am still struggling to make a div appear on top of an image in Internet Explorer. The code I am currently using is as follows:
<div id="wrapper">
<div id="content">
<div class="copy">...</div>
<div id="toggle-view"></div>
<img id="view" src="/..." />
</div>
</div>
Below is the corresponding CSS styling:
#wrapper { width: 960px; margin: 0 auto 0 auto; background: #fff; }
#content { width: 960px; height: 555px; position: relative; z-index: 20; }
#toggle-view { display: block; width: 150px; height: 25px; cursor: pointer; position: absolute; top: 12px; right: 10px; z-index: 10; }
#view { width: 722px; height: 555px; position: relative; z-index: 1; }
This setup works perfectly in Chrome and Firefox, but not in Internet Explorer 7. How can I ensure that the #toggle-view div appears on top of the #view img?
Thank you
UPDATE: After some tinkering, I have discovered a solution. It seems that in Internet Explorer (all versions including 9), if an element does not have a 'background' property set, it struggles to manage z-indexes correctly. The frustrations of dealing with IE continue...