title: What would cause a link to not fill the entire height of a table cell when height=100%?
body: <h2>Example</h2>
  
  <p><img src="https://i.imgur.com/ecptS.png" /></p>
  
  <p>The yellow represents the link/clickable area.</p>
  
  <h2>CSS</h2>
  
  <pre><code>#shipment-list a {
      display: block;
      width: 100%;
      height: 100%;
      color: inherit;
      text-decoration: inherit;
      background-color: yellow;
      margin: 0;
      padding: 0;
  }
  </code></pre>
  
  <h2>HTML</h2>
  
  <pre><code>        &lt;td&gt;
              &lt;a href="#"&gt;
                  Jul 24, 2011 @ 1:05p.m.&lt;br&gt;
                  (4 hours, 19 minutes ago)
              &lt;/a&gt;
          &lt;/td&gt;
  </code></pre>
  
  <p>I can't seem to <a href="http://jsfiddle.net/mnpenner/2phF5/" rel="nofollow noreferrer">reproduce it in a jsFiddle</a> however, and I can't link you to the live page because it's running off localhost and contains some confidential information.</p>
  
  <p>Any idea what might be causing this?</p>
  
  <p>I get the same result in FF4 and IE9.</p>
  
  <p><strong>Edit:</strong> Figured out <a href="http://jsfiddle.net/mnpenner/2phF5/12/" rel="nofollow noreferrer">what was causing the problem</a>. Still don't know how to fix it. The <code>td</code> basically shrinks to its contents, even though it doesn't appear that way. I don't want to explicitly define the height of my <code>td</code> though, so how do I get around this?</p>