Links Don't Work with Absolute Positioned Background Image

I have a site where I have an absolute positioned background .png image of vines positioned over a repeating background image so that the pages will extend properly with the content. However, any links that appear over the vines.png image don't work. My client really wants the .png image so does anyone know how I can code the CSS so the links work?

The Container division contains the basic repeating image for the pages (middle.jpg). The Vines division is for the vines.png image that is causing the problem. The actual vines.png image is listed in each page.

div#container {

Help Resolve Problem With Absolute Positioning Nested Inside Relative

Why does GOOD VERSION, below, work perfectly, but the BAD VERSION fails (all browsers)?

The only difference is the order of TOPIMAGE and BOTTOMIMAGE in the 2nd IMAGEBUTTON.

How can I adjust my CSS so both versions work?


a.IMAGEBUTTON img.TOPIMAGE { z-index:1;  position:absolute;  }
a.IMAGEBUTTON:hover img.TOPIMAGE { filter:alpha(opacity=0); -moz-opacity:0.0; -khtml-opacity: 0.0; opacity: 0.0; } 
a.IMAGEBUTTON img {width:150px; }
<a class="IMAGEBUTTON" href="" > 
<img class="TOPIMAGE" src="pics\pic2.jpg" /> 

Syndicate content