title: HTML/CSS: link not clickable
body: <p>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 clickable. </p>
  
  <p>Note I have substituted www.google.com for the hyperlink. In the actual app it points to the daily view of calendar.</p>
  
  <p>Would be extremely grateful if someone could spot the error. Thank you.</p>
  
  <p>Links for 2, 3, 4 and 7 work but links for 5, 6 and 8 do not work.  </p>
  
  <p>The jsfiddle is <a href="http://jsfiddle.net/6YRRF/1/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>Here is the same code as in the fiddle:</p>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>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; 
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;table&gt;
      &lt;tr class="calendar-row"&gt;&lt;td class="calendar-day"&gt;&lt;span style="position:relative;height:400px;width:70px;"&gt;&lt;a href="http://www.google.com" class="day-number"&gt;2&lt;/a&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td class="calendar-day"&gt;&lt;span style="position:relative;height:400px;width:70px;"&gt;&lt;a href="http://www.google.com" class="day-number"&gt;3&lt;/a&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td class="calendar-day"&gt;&lt;span style="position:relative;height:400px;width:70px;"&gt;&lt;a href="http://www.google.com" class="day-number"&gt;4&lt;/a&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td class="calendar-day"&gt;&lt;span style="position:relative;height:400px;width:70px;"&gt;&lt;a href="http://www.google.com" class="day-number"&gt;5&lt;/a&gt;&lt;div class="event"&gt;6:00 PM&lt;br&gt;&lt;a href="eventdetail.php?id=1438"&gt;drinks&lt;/a&gt;&lt;/div&gt;&lt;/span&gt;&lt;/td&gt;
              &lt;td class="calendar-day"&gt;&lt;span style="position:relative;height:400px;width:70px;"&gt;&lt;a href="http://www.google.com" class="theday-number"&gt;6&lt;/a&gt;&lt;div class="event"&gt;&lt;a href="eventdetail.php?id=1441"&gt;Test&lt;/a&gt;&lt;/div&gt;&lt;/span&gt;&lt;/td&gt;
              &lt;td class="calendar-day"&gt;&lt;span style="position:relative;height:400px;width:70px;"&gt;&lt;a href="http://www.google.com" class="day-number"&gt;7&lt;/a&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;/span&gt;&lt;/td&gt;
              &lt;td class="calendar-day"&gt;&lt;span style="position:relative;height:400px;width:70px;"&gt;&lt;a href="http://www.google.com" class="day-number"&gt;8&lt;/a&gt;&lt;div class="event"&gt;6:00 PM&lt;br&gt;&lt;a href="eventdetail.php?id=1419"&gt;party&lt;/a&gt;&lt;/div&gt;&lt;/span&gt;&lt;/td&gt;
  &lt;/tr&gt;
          &lt;/table&gt;
  </code></pre>