Html/css: Link Not Clickable

This is undoubtedly a stupid error, but I am going crazy trying to find it. In the following code for a calendar, links if there is an event and also links for today are not clicka

Solution 1:

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.

Solution 2:

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

Solution 3:

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

Solution 4:

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 :)

Solution 5:

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:

<spanstyle="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!