title: Table link not working in Firefox, IE8
body: <p>I have a table which has a background image(sprite). The td of the table functions as a link relative to the position of the sprite image. I have it like this:</p>
  
  <p>CSS:</p>
  
  <pre><code>table.populair {
      background-image:url(populair.png);
      background-position:27px 27px;
      background-repeat:no-repeat;
  }
  
  
  table td {
      border:solid 1px #ccc;
      border-radius:4px;
      cursor:pointer;
  }
  
  td a{
      display:block;
      width: 105%;
      height: 105%;
      margin-left: -3px;
      margin-top: -2px;
          z-index:15;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table class="populair" border="0" bordercolor="#FFCC00" width="647" height="322" cellpadding="0" cellspacing="27"&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;a href="http://www.link.com/"&gt;&lt;/a&gt;
                  &lt;/td&gt;
                  &lt;td&gt;&lt;a href="http://www.link.com/"&gt;&lt;/a&gt;
                  &lt;/td&gt;
                  &lt;td&gt;&lt;a href="http://www.link.com/"&gt;&lt;/a&gt;
                  &lt;/td&gt;
                  &lt;td&gt;&lt;a href="http://www.link.com/"&gt;&lt;/a&gt;
                  &lt;/td&gt;
                  &lt;td class="none"&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;/table&gt;
  </code></pre>
  
  <p>It works in Chrome (the links are clickable) but not in Firefox and IE8.  The weird this is that if I change the td a from percentage to pixels it seems to work, but that ruins my sprite position...So what can I do to make the links work?</p>