0

On this page I am using negative margins to push up the cloud graphic and then hiding it behind another graphic using z-index.

Works fine in all modern browsers, but ie6 & 7 the cloud is covering the bottom part of the clock.

How to have the cloud not covering bottom part of clock in ie6 & 7>

user229044
  • 232,980
  • 40
  • 330
  • 338
chaser7016
  • 595
  • 2
  • 10
  • 28

1 Answers1

3

IE6 and IE7 both have a quirky z-index bug, as documented on quirksmode. You can find a solution for it here: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

The solution is to actually give the parent element a higher z-index value, as he shows in the link:

<div style="position: relative; z-index: 3000">
    <div style="position:absolute;z-index:1000;">
        <a href="#">Page</a>
        ...
    </div>
</div>
<img style="position:absolute" src="myimage.png" />

edit

Since asker mentioned that his issue was not exactly what was described in the link, the problem might be one of stacking context as discussed by the accepted answer in this question: IE7 Z-Index Layering Issues

Community
  • 1
  • 1
  • thanks yet Im not using relative or absolute positioning. The cloud is a div that sits below bottom part of clock which I am then using negative margins to push up and z-index to hide. Do i need to use relative and absolute positioning? On bottomclock id i now have z-index: 1000; while the cloud id has z-index: -9999, yet still in ie6/7 cloud covers clock. – chaser7016 Nov 26 '10 at 23:53
  • @Jonah1289 - Then you might have to make your parent element have `position: relative` due to how IE interprets stacking contexts. The accepted answer here might help: http://stackoverflow.com/questions/1287439/ie7-z-index-problem –  Nov 26 '10 at 23:58
  • THNX adding relative positioning fixed the issue in ie7. Downloading IEtester now to test in ie6. thanks again Crab! – chaser7016 Nov 27 '10 at 00:13