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;
z-index: 10;
background-color: white;
opacity: 0;
filter: alpha(opacity=0);
}
All relevant CSS code is found in the top section of the .html file. Thank you so much for any help!