Overlapping div not lining up properly

See more:

CSS

HTML

Hi,

My website includes an unordered list, with 3 < li > items within it. Each of these < li > items contain an image and 3 lines of text. I want this entire box to be clickable -- including the contents, so I used the following code to create a transpartent div "in front" of the < li >, with a link included in the div.

Here is my site.[^]

The individual < li > code is:

     <img src="http://www.nowhouseproject.com/images/photos/imgDemoHouse.jpg" class="houseImage"/>
     <div class="titlebox">Demo Title</div>
     <div class="locationbox">Demo</div>
     <div class="pricebox">DemoDemo</div>
     <div class="boxlink"><a class="divLink" href="http://www.google.com"></a></div>

</li>

As you can see, boxlink has a class of "divLink". The CSS code for this element is below. It works perfectly in Internet Explorer at SOME screen sizes, but when viewed at smaller resolutions, or in Chrome, the div doesn't line up perfectly with the < li > item behind it. You can tell by hovering anywhere within the greenboxes, the option to click only appears part way down the box. What's with this inconsistency??? How to fix?



Here is the CSS code:

div.boxlink {
    position: relative;
    width: 100%;
    height: 100%;
    background: #eee;
    color: #000;
    padding: 0px;
	opacity: 0;
	margin-top: -100%;
}

div.boxlink:hover {
    cursor: hand;
    cursor: pointer;
    opacity: 0;
}

a.divLink {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-decoration: none;
    /* Makes sure the link doesn't get underlined */
    z-index: 10;
    /* raises anchor tag above everything else in div */
    background-color: white;
    /*workaround to make clickable in IE */
    opacity: 0;
    /*workaround to make clickable in IE */
    filter: alpha(opacity=0);
    /*workaround to make clickable in IE */
}

All relevant CSS code is found in the top section of the .html file. Thank you so much for any help!