2

Example

The yellow represents the link/clickable area.

CSS

#shipment-list a {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: inherit;
    background-color: yellow;
    margin: 0;
    padding: 0;
}

HTML

        <td>
            <a href="#">
                Jul 24, 2011 @ 1:05p.m.<br>
                (4 hours, 19 minutes ago)
            </a>
        </td>

I can't seem to reproduce it in a jsFiddle however, and I can't link you to the live page because it's running off localhost and contains some confidential information.

Any idea what might be causing this?

I get the same result in FF4 and IE9.

Edit: Figured out what was causing the problem. Still don't know how to fix it. The td basically shrinks to its contents, even though it doesn't appear that way. I don't want to explicitly define the height of my td though, so how do I get around this?

mpen
  • 272,448
  • 266
  • 850
  • 1,236

6 Answers6

3

The answer has been posted a couple of times under different names.

How can I get a div to fill a table cell vertically?

Make a DIV fill an entire table cell

NOTE: These solutions assume the table has an explicit height.

In Chrome, position: relative is your friend. It'll force the <a> to take up the entire table cell's height and width. Sadly this isn't enough to make it work in FF and IE. Check the demo.

To make it work in Chrome + FF, you can use display: table instead of display: block. Check it out.

While IE8 and IE9 both support display: table, they don't like its usage in this solution unless you give <td> a height of 100%, as seen in this third demo. If you resize your browser window or the width of the table, you'll notice that the link doesn't reach the full height of the cell. That's because the link is going off 100% (<a>) of 100% (<td>) of 300px (<table>), so the link will be at most 300px tall. It's a compromise, and one I'm not sure you'll be able to work around.

Community
  • 1
  • 1
Chris
  • 9,994
  • 3
  • 29
  • 31
  • The fiddle you linked me to has the exact same problem in FF4/IE9. That fixed nothing, as the OP of the other question pointed out. – mpen Jul 25 '11 at 01:15
  • my apologies for that, I've updated my answer to include solutions that work for more than just Chrome. – Chris Jul 25 '11 at 01:25
  • Aha! Now we're on to something. Your example works in both FF4+IE9 but only in FF4 when I implement it on my site....hrm. Must investigate further. – mpen Jul 25 '11 at 01:31
  • Oh...yeah...I don't want to give the table an explicit height either. Combined with Brian's JS solution, this isn't too bad, but not as good as it ought to be. – mpen Jul 25 '11 at 01:41
  • I fear that in order for any solution to work "as intended" in IE, you will need to give *something* an explicit height. It's just how IE's height calculations work. – Chris Jul 25 '11 at 01:51
1

Perhaps the table has a cellpadding or is styled with one elsewhere in your stylesheet? That could cause the background color and the link to not fill the entire cell.

Jeshurun
  • 22,940
  • 6
  • 79
  • 92
  • I'm expecting it with firebug, and I don't see anything that has padding or margins that would cause that. – mpen Jul 25 '11 at 00:59
1

While it may not be the prettiest solution, I am fairly sure you could put that around a div.

Something similar to

<td>
   <a href="#">
      <div class="tableElement">
         Jul 24, 2011 @ 1:05pm<br />
         (4 hours, 19 minutes ago)
      </div>
   </a>
</td>

Then just ammend your css to style the div to fill the size of each table element.

Mathew Hood
  • 675
  • 2
  • 7
  • 19
1

You could make the whole tr tag clickable.

<tr onclick="location.href='there';" style="cursor:pointer;">
Brian Hoover
  • 7,861
  • 2
  • 28
  • 41
1

This will help: CSS 100% Height.

Leo Jweda
  • 2,481
  • 3
  • 23
  • 34
  • I found and read that already. It's explains that the parent element basically collapses to size of it's content, so setting 100% won't make the element fill the height of the page. I'm working inside a `td` however, which has a well-defined height which is clearly bigger than my `a`. – mpen Jul 25 '11 at 01:01
  • Nevermind... I set the height of the `td` explicitly and suddenly the `a` filled it. But I don't want to define the height of my `tds`... – mpen Jul 25 '11 at 01:05
  • 1
    @Mark: You have a 2 options: 1) Set the height of any of the parents explicitly then set everything else to percentages of that, ie, set the div that the table resides in to a certain height and the table will be a percentage of that, and the rows' heights can be set as percentages. 2) Set the height of to 100% and go down the DOM all the way to the table cell setting the heights to percentages of their parents (if you can't use explicit values). – Leo Jweda Jul 25 '11 at 02:33
  • I can't use explicit values because I don't know how much text is going to be in each of those cells. I don't think using percentages gets around the issue either... I wouldn't want to set the body or entire table to 100% for example. Oh well... – mpen Jul 25 '11 at 02:37
0

Try this:

td {
    height: 100%;
    vertical-align: top;
}
td a {
    display: table;
    height: 100%;
}

It should work at least in FF.

Wyrfel
  • 1
  • does work in FF, but doesn't do anything at all in chrome. http://jsfiddle.net/GWyGF/ i need to support more than just FF ;) at the very least, the latest version of all major browsers – mpen Aug 09 '11 at 15:26