links on rotated div with css don't seem to work

Question

I display some images within rotated divs and hyperlink them. However, the links don't seem to work.... may anyone explain why that is the case?

link: http://inetgate.ca/dev/portfolio use admin/test to get past the password prompt.

Thanks! Ron

example code:

<div id="pic-7" class="pic" style="height:130px; width:110px; top:9px;left:370px; -moz-transform:rotate(-16deg); -webkit-transform:rotate(-16deg); position: absolute; background-color:#fff;background-position:center top;font-size:80%">
            <div align="center">
            <img style="margin-top:4px; border: 1px solid #999;" src="gallery/img/thumbs/wittmerperformance.png"/><a class="fancybox" rel="fncbx" href="http://www.wittmerperformance.com/" target="_blank" onclick>Wittmerperformance
            </a></div>
    </div>

Answer 1

remove the position:absolute; on the div that has the children <a> tag. This will fix your problem. When nesting clickable links inside an absolute positioned element, the <a> tag itself also has to be positioned absolute for it to be clickable, this is due to CSS priority. Why not just make the div that is position:absolute; to relative and then you wouldn't run into this issue. Or just make the <a> itself absolute. Simple fix!