CSS Positioning Absolute within table cells not working in Firefox

Question

I cannot figure out this positioning problem in Firefox. It doesn't seem to follow the absolute positioning rule. Is there something I'm doing that shouldn't be done, but some browesers handle it and some don't?

JS Fiddle:

Original - http://jsfiddle.net/g9qzh/

Updated - http://jsfiddle.net/g9qzh/2/

Works in IE, Chrome, Safari, Opera

Here's the actual code. Let me know if I'm not following some kind of standard I don't know about.

HTML:

<table>
    <tr>
        <td>
            <div id="three">Three</div>
            <div id="two">Two</div>
        </td>
    <tr>
    <tr>
        <td>
            <div id="three">Three</div>
            <div id="two">Two</div>
        </td>
    <tr>
</table>

CSS:

#two {
   position: absolute;
   top: 0;
}
td {
   position: relative;
}

​My only clue is that there is some other value that I should assign to td that would cause it to work. Some other stackoverflow questions have mentioned Firefox misbehaving with this, but I haven't been able to find an answer. I tried assigning both top and left values of zero, but FF won't budge. ​

Answer 1

Change ID's to classes and also displaying it as blocks fixes it:

http://jsfiddle.net/GchWZ/

It is better and more "proper" to user an inner div though as quoted from this stack overflow post: Does Firefox support position: relative on table elements?

<td>
  <div style="position:relative">
      This will be positioned normally
      <div style="position:absolute; top:5px; left:5px;">
           This will be positioned at 5,5 relative to the cell
      </div>
  </div>
</td>

Answer 2

You are using IDs

IDs are unique. Use Classes if you want to reuse a style assignment.

Answer 3

The problem comes from how FF renders tables. If you set your TDs to display:inline-block; it should display correctly.