CSS: working with absolute element inside a relative container

Question

I have a FF problem when using an "absolute" element inside a "relative" container

<table>
  <tr>
    <td style="position:relative; height:40px; width:80px">
      <img style="position:absolute; top:0px; left:0px" src="pic.jpg" />TITLE
    </td>
  </tr>
</table>

What I'm trying to achieve here is to position the image on the top-left corner of the cell. Therefore I set the img tag to "position:absolute", and the td tag to "position:relative". This is working fine in IE, but not in FF and Chrome. The image appears on the top-left corner of my document. It seems that the "relative" property of the cell container is being ignored.

Any idea what I'm doing wrong with these styles?

Answer 1

I think I got it solved by using a div inside the td element.

so the new structure would be:

<table>
  <tr>
    <td>
      <div style="position:relative; height:40px; width:80px">
        <img style="position:absolute; top:0px; left:0px" src="pic.jpg" />TITLE
      </div>
    </td>
  </tr>
</table>

Answer 2

I have run into this problem before too. Never found a way other than to wrap the td content that I wanted to position: absolute in an element (div) that had position: relative.

Unfortunately it isn't much of an answer. I'd be curious to know the exact reason for this, but my guess is it's due to the special display type of table elements.