How to Make a div a Clickable Link

I found a Web site with instructions on how to do what I wrote in the “Subject” line:

<div class="feature">
   <a href="http://www.example.com"></a>
</div>

div.feature {
    position: relative;
}
 
div.feature a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-decoration: none; /* No underlines on the link */
    z-index: 10; /* Places the link above everything else in the div */
    background-color: #FFF; /* Fix to make div clickable in IE */
    opacity: 0; /* Fix to make div clickable in IE */
    filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}

My OS on my home computers is CentOS, and I run Apache locally to test my Web sites before uploading them to my VPS. When I used this code in my index.html file, it worked locally and brought up the external Web site when the div was clicked. When I uploaded index.html, the mouse pointer still worked, but when the div was clicked, absolutely nothing happened–the external Web site did not open.

Any ideas why the same code works locally but not on my VPS?

Thanks so much.

Ken

Is it only your VPS it’s not working on? It’s working on my local IE11. There’s nothing to indicate in your code AFAIK that it shouldn’t be working. IE does have problems with links that are empty and not wanting to recognzie them. Try adding &nbsp; inside of your anchor to give it some content.

Thanks for the reply Ryan.

Actually in my real code, the div has plenty of content in addition to the line: an image and text.Here’s the entire div:

      <div class="clickable"
           style="cursor: pointer;
                  width: 360px;
                  margin-left: auto;
                  margin-right: auto;
                  margin-top: 60px;
                  background-image: url(Messiah-3.jpg);
                  background-repeat:no-repeat;
                  background-color: white;
                  border-top-style: solid;
                  border-left-style: solid;
                  border-right-style: inset;
                  border-bottom-style: solid;
                  border-top-width: 2px;
                  border-left-width: 2px;
                  border-right-width: 10px;
                  border-bottom-width: 10px;
                  border-top-color: #9900cc;
                  border-left-color: #9900cc;
                  border-right-color: #9900cc;
                  border-bottom-color: #9900cc;">

         <a href="http://messiahstudies.org" onclick="window.open(this.href,'_blank');return false;"></a>
         <h1 style="margin-top: 160px;">Our Sister Web Site:<br />Messiah Studies</h1>
         <p>We have another Web site, Messiah Studies, that is devoted to a detailed study of Messianic prophecy. However, it is a new Web site, and so far there are only a few papers posted. It is our goal, however, to develop a series of papers dealing with the Messianic prophecies of the Old Testament in historical order. The site is designed for Jewish inquirers, but Christians can gain much from these studies as well. There is also some Jewish music you can listen to, including HaTikvah (Israeli National Anthem), Hava Nagila, Jerusalem of Gold, and the Yigdal (on which the Christian hymn, "The God of Abraham Praise," is based). Please take a look and send us your suggestions.</p>

      </div> <!-- End Sister Web Site -->

Regarding your question, “Is it only your VPS it’s not working on?” except for my VPS, I have no access to any other Internet server. It does work on my home computer running Apache. That amounts to the same code executed in the same browser (Firefox). I just can’t understand why it won’t work when the code is downloaded from the VPS rather than my local public_html directory.

That’s strange, it works fine for me!

Good news: I cleared the cache from Firefox, and amazingly it now works perfectly.

I would be interested in how cached pages caused the problem.

Ken

Hard to say - perhaps you were looking at an old version of hte page which (unbeknownst to you) was broken.

You can also wrap the <div> in a <a href=???> to make the whole div clickable.

Cordially, David

That’s fine if you’re happy using HTML5, but it wasn’t allowed in HTML4, so it depends whether you need backwards compatibility. I don’t know how well supported that construction is in older browsers – has anyone got any info on that?

IE6 used to have a lot of trouble with it and indeed in complicated situations even more modern versions of all browsers would trip up and do something silly with the layout.

The solution though is to make sure you set the ‘a’ element to display:block (or floated or inline-block depending on situation) and then in modern browsers it is fine.

Remember the a element is an inline element and although you wrap it around a block element older IE (in some situations) used to only partially honor the nested block element as whole link or indeed would misplace the element altogether.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.