A:hover not working-- Problem with div's with z-index

[ColbyMiers]

Hi. I am developing a website with a "footer" that has some text and a link.

I am using a div with absolute positioning. An example of the footer working properly can be seen in the bottom-right of this page.

If you click on the first link of the navigation menu, "never been wetter", you'll see that the footer is still there but the link with my name, Colby Miers, no longer works. I set the z-index of the div to -1 so the div wouldn't appear above the photos, so I think there's some complication with that.

Even so, the div works fine in the home page (same CSS class) and appears behind the main image (If you make the window small enough you'll see the text of the footer goes behind the image rather than on top of it).

Is there a way to make the link clickable? Why is there a piece of "invisible glass" over my div in this situation? I think it has something to do with the img's but I'm not sure.

Thanks in advance for any help you can provide!

Here is the relevant code in the CSS:

.copyright { 
     position:fixed; 
     bottom:15px; right:25px; 
     font-family: arial; 
     font-size:11px; 
     color:#ccc; 
     line-height:165%; 
     z-index:-1; 
     text-align:right;
}
 
a.designer {
    text-decoration:none;
    font-family:'Arial', Serif;
    font-size:11px;
    color: #999; 
}
 
 
a.designer:hover {
    text-decoration:none;
    color: #33CC99;
}

Here is the relevant code in the HTML:

<div class="copyright">
&copy; 2010 Ian Stanton. All rights reserved.<br />
Site by <a href="http://colbymiers.com" target="_blank" class="designer">Colby Miers</a>
</div>

[drhowarddrfine]

Yes, setting the z-index is causing the problem.

[ColbyMiers]

I understand that but why is it working fine in some pages ( the hom page ) but not so in others? Isn't there a way to get it to work in all pages?