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>