CODEWITHSUNDEEP
htmlcss
user1904273
user1904273

Reputation: 4764

Why are some of my links not clickable but some are?

In the following code for a calendar, links if there is an event and also links for today are not clickable.

Note that I have substituted www.google.com for the hyperlink. In the actual app it points to the daily view of calendar.

Would be extremely grateful if someone could spot the error. Thank you.

Links for 2, 3, 4 and 7 work but links for 5, 6 and 8 do not work.

The jsfiddle.

div.event {
  position: relative;
  vertical-aligh: top;
  z-index: 3;
  top: 25px;
  text-width: 70px;
}

a.event {
  position: relative;
  vertical-align: top;
  z-index: 3;
  //    top:-15px;
  text-width: 70px;
}

a.day-number {
  vertical-align: top;
  background: #999;
  z-index: 2;
  top: 0px;
  padding: 4px;
  color: #fff;
  font-weight: bold;
  width: 18px;
  text-align: center;
  float: right;
}

a.theday-number {
  vertical-align: top;
  background: #999;
  z-index: 2;
  top: 0px;
  padding: 4px;
  color: #fff;
  font-weight: bold;
  width: 18px;
  text-align: center;
  float: right;
  background-color: red;
}
<table>
  <tr class="calendar-row">
    <td class="calendar-day"><span style="position:relative;height:400px;width:70px;"><a href="http://www.google.com" class="day-number">2</a><p>&nbsp;</p><p>&nbsp;</p></span></td>
    <td class="calendar-day"><span style="position:relative;height:400px;width:70px;"><a href="http://www.google.com" class="day-number">3</a><p>&nbsp;</p><p>&nbsp;</p></span></td>
    <td class="calendar-day"><span style="position:relative;height:400px;width:70px;"><a href="http://www.google.com" class="day-number">4</a><p>&nbsp;</p><p>&nbsp;</p></span></td>
    <td class="calendar-day"><span style="position:relative;height:400px;width:70px;"><a href="http://www.google.com" class="day-number">5</a><div class="event">6:00 PM<br><a href="eventdetail.php?id=1438">drinks</a></div></span></td>
    <td class="calendar-day"><span style="position:relative;height:400px;width:70px;"><a href="http://www.google.com" class="theday-number">6</a><div class="event"><a href="eventdetail.php?id=1441">Test</a></div></span></td>
    <td class="calendar-day"><span style="position:relative;height:400px;width:70px;"><a href="http://www.google.com" class="day-number">7</a><p>&nbsp;</p><p>&nbsp;</p></span></td>
    <td class="calendar-day"><span style="position:relative;height:400px;width:70px;"><a href="http://www.google.com" class="day-number">8</a><div class="event">6:00 PM<br><a href="eventdetail.php?id=1419">party</a></div></span></td>
  </tr>
</table>

Upvotes: 3

Views: 47735

Answers (9)

Yarik
Yarik

Reputation: 742

For those who didn't address their problem out of the answers provided here, check html element or it's parent element to don't have this CSS property:

pointer-events: none;

Upvotes: 0

user3795373
user3795373

Reputation: 13

You can either remove <p> tag or provide css(display: inline-block) to <p> tag.

Upvotes: 0

rahool
rahool

Reputation: 639

You need to move the <p> and <div> tags out of the <span>

<p> and <div> are block-level elements and a <span> is an inline element, and you can't have a block element inside an inline element.

Upvotes: 6

user379888
user379888

Reputation:

When using position:absolute;and links together, there are issues with z-index. In order for the link to work, add a high z-index value, For example,

z-index:9999999;

Upvotes: 5

Sheriff_McLawDog
Sheriff_McLawDog

Reputation: 71

From what I can tell, you have some elements overlapping one another. Part of the problem is that you are setting width on an inline element (span).

Discussed here on stackOverflow:

CSS - width not honored on span tag

I added the display: inline-block property to your span tags and also added some background color just for contrast here:

<span style="display: inline-block;position:relative;height:400px;width:70px;">

http://jsfiddle.net/6YRRF/16/

All your links seem to be working now.

Hope this helps!

Upvotes: 0

Ron Saha
Ron Saha

Reputation: 5

I see the links are clickable if you remove the <span></span> tag which you have placed inside <td></td>. I suggest you add styling inside <td> instead of using <span>.

Try. It might work :)

Upvotes: 0

Ashwin Hegde
Ashwin Hegde

Reputation: 1771

Please remove the span wrap inside td. And Yes! correct your css.

<style>
    div.event {
    position:relative; 
    vertical-align:top;
    z-index:3; 
    top:25px;
    width: 70px;
}
a.event {
    position:relative; 
    vertical-align:top;
    z-index:3; 
//  top:-15px;
    width: 70px;
}
a.day-number  {
    vertical-align:top; 
    background:#999; 
    z-index:2; 
    top:0px;    
    padding:4px; 
    color:#fff; 
    font-weight:bold; 
    width:18px; 
    text-align:center;
    float:right;
}
a.theday-number  {
    vertical-align:top; 
    background:#999; 
    z-index:2; 
    top:0px;    
    padding:4px; 
    color:#fff; 
    font-weight:bold; 
    width:18px; 
    text-align:center;
    float:right;
    background-color:red; 
}

</style>

Upvotes: -1

Steven
Steven

Reputation: 867

Add a display block to your span inside your td calendar-day and it will work.

Upvotes: 0

Rinku
Rinku

Reputation: 1078

Instead of div within a span use other html element. It seems this is the problem. If you remove those divs, elements are clickable..

Upvotes: 0

Related Questions