Question

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>

Answer 1

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