www.webdeveloper.com
Results 1 to 5 of 5

Thread: <span> inside an <a> to make a <div> clickable. Help with IE

  1. #1
    Join Date
    May 2011
    Posts
    52

    <span> inside an <a> to make a <div> clickable. Help with IE

    Hi There,

    So as the title says, I am using spans inside of anchors to make an entire div click-able as a link but seem to be having problems getting it to work in IE. Can someone have a look at the code and tell me if there is a way to make this work in IE? The entire div is click-able in all the other browsers I have tried but I can't figure out how to get it to work in IE. I have IE specific style sheets so if there is an IE specific work-around I can put it in those.

    Any help would be much appreciated.

    CSS:
    Code:
    .box {
    background-color:#FFFFFF;
    border:1px solid #11118D;
    float:left;
    font-size:15px;
    font-weight:bold;
    height:190px;
    margin:5px;
    padding:10px;
    position:relative;
    text-align:center;
    width:130px;
    }
    
    span.boxlink {
    height:100%;
    left:0px;
    position:absolute;
    top:0px;
    width:100%;
    z-index:4;
    }
    And relevant HTML:
    HTML Code:
    <html>
      <head>
      </head>
      <body>
        <div class="box">
          <a href="link_target.php">Link Title<span class="boxlink"></span></a>
          <img src="images/link_image.png" alt="link" width="120" height="120" />
        </div>
      </body>
    </html>
    To see this in context of a live page you can visit: http://www.hswhite.co.nz/news.php

    Thanks in advance.

  2. #2
    Join Date
    Mar 2012
    Posts
    1,115
    You can make the area that is clickable larger by padding the text:


    <style>
    #test {
    width:200px;
    height: 40px;
    }
    a {
    padding: 50% 50%;
    }
    </style>
    </head>
    <body>
    <div id=test>
    <a href="#">test</a>
    </div>

  3. #3
    Join Date
    May 2011
    Posts
    52
    Thanks for taking the time to reply, but this method will actually break the entire layout. All it does is make the <a> larger which moves everything else in the <div> around.

    The idea I'm going for (which works in Firefox, chrome, safari and opera but I cant get to work in IE) is to have a <span> that is click-able as a link but which sits on top of all the other content in the <div> rather than being in-line with the <div> content.

    Anyone else got any ideas?

  4. #4
    Join Date
    Mar 2012
    Posts
    1,115
    Quote Originally Posted by damndaewoo View Post
    The idea I'm going for (which works in Firefox, chrome, safari and opera but I cant get to work in IE) is to have a <span> that is click-able as a link but which sits on top of all the other content in the <div> rather than being in-line with the <div> content.
    I'm confused. First you said that you wanted the whole div to be clickable, now you say you want the title to be clickable. If the latter is all you want, why not make the title a heading (which is structurally preferable anyway)?:

    Code:
    <div class="box">
        <h3><a href="link_target.php">Link Title</a></h3>
        <img src="images/link_image.png" alt="link" width="120" height="120" />
    </div>
    Or if you DO want the whole div to be clickable, why not include the whole of the text in the anchor? e.g.

    Code:
    <div class="box">
        <a href="link_target.php">Link Title<br  />
         <img src="images/link_image.png" alt="link" width="120" height="120" />
          blah, blah, blah... </a>
    </div>
    In the latter case, to make the title sit on top of the text, put a <br /> after it. However, I'm not sure whether it will like having the graphic AND text included in the anchor?

  5. #5
    Join Date
    May 2011
    Posts
    52
    Hi again. Sorry for the confusion.

    Firstly, yes, the idea is for the whole div to be clickable. Secondly, I didn't say I wanted the title to be clickable, you are misinterpreting my comment and relating it to only two dimensional positioning. What I meant by having the span on top was not related to being on top in relation to layout (or inline) but on top as in layer wise. i.e. a span that does not encompass the other content but sits z-index positioned above the other content, in the top layer. Does this make sense to you now?

    If you had taken the time to click the link and have a look at the live page, I'm guessing you would have been able to see what i was talking about. Also, having text then an image then more text in a single anchor is semantically incorrect.

    But thank you for trying to help.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles