4

I'm having some issues with absolute positioning inside a table cell in Internet Explorer (9 specifically, but I'm sure the issue exists in <9 as well). I'm trying to force a div inside a table cell to take up the whole cell. It was pretty easy in chrome/ff/safari using: 

div {
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
}

td {
    position: relative;
}

But for some reason, IE behaves completely differently. I can't get it to give the div a dynamic height based on the table cell at all. Here's an example to show what I'm talking about. It works how I need it to in chrome/ff/safari, but it's broken in IE. Is there any way to get it to work the same way in IE? Thanks!

Chris
  • 1,040
  • 2
  • 14
  • 23
  • It doesn't work for me in Firefox. Are you sure you checked it in Firefox? If so, which version? Also, read this answer: http://stackoverflow.com/questions/7629326/position-relative-in-firefox/7629567#7629567 – thirtydot Jun 05 '12 at 16:00
  • Ah, you're right, it doesn't work in FF... It's unfortunate that `position: relative;` on td's isn't supported in the w3c specs. Is there a reason for that? Is there a workaround or am I doing this completely wrong? – Chris Jun 05 '12 at 16:24
  • I don't know why the behavior wasn't defined in the specs. There isn't a particularly easy way to solve your problem. Why are you using a `table` in the first place? – thirtydot Jun 05 '12 at 16:38
  • I need a grid of an indeterminate number of uniform tiles that take up all available space in its container... And tables seemed like the best way to do it without using javascript. – Chris Jun 05 '12 at 16:59

2 Answers2

3

In case someone is still interested in this; a simple solution will fix the issue on IE 10 (my current target).

You need to have a nested div to locate your absolute positioned element:

<td>
    <div>
        <a href="#">FULL HEIGHT</a>
    </div>
</td>

And then add some css, including the lil trick for IE:

td {
    position: relative;
    height: 1px; // IE FIx
}
td > div {
    height: 100%;
}
td > div a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // Beauty only
    background-color: orange;
    color: white;
    text-decoration: none;
}
muecas
  • 4,265
  • 1
  • 8
  • 18
1

I recommend you instead of positioning your element to all directions, use only two of them and instead, use size for your div.

like:

div {
    position: absolute;
    top:0;
    bottom:0;
    width: 100%;
    height: 100%
}

td {
    position: relative;
    width: 400px;
    height: 400px;
}
Farid Rn
  • 3,167
  • 5
  • 39
  • 66
  • 1
    A good tip that I'll probably use, but this doesn't answer my question. Your example doesn't work in IE. :) – Chris Jun 05 '12 at 15:56
  • 1
    which has the significant drawback of not being able to use margins and paddings with pixelvalues. – Christoph Jun 05 '12 at 16:08