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. ​

Solution 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>

Solution 2

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

Solution 3

You are using IDs

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

Solution 4

Try this:

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

and for css:

#two {
    position: absolute;
    top: 0px;
}

#wrapper {
    position: relative;
}

View more solutions

Comments

[EGHDK]

That worked! Great, now how did you know to do that? Is it something I should read up about (I don't really know the proper use of display) or is it something that is just a "fix" for Firefox or should it be a standard operating procedure whenever doing this in the future?

[Phu]

I remember reading a long time ago something about how firefox handles td's differently. I'll try to find the article.

[EGHDK]

Yeah, display:block was a temporary solution, because now that I tried to expand it a bit more and required display:block-inline it also broke in Firefox, but still worked in every other browser.

[EGHDK]

Actually now diplay:inline-block worked. I'm going to select your answer as it required online an extra line of CSS and not a lot more html.

[Richard Robertson]

I'm a bit late getting back to this, but I find myself surprised with the down vote. Why? I gave a rather detail response on this topic here: stackoverflow.com/questions/8951993/… ..and received a major up vote and "Best Answer" for my reply. I use CSS Tables for horizontal menu positioning and as a solution to the problem of "Stick Footers" without recourse to absolute dimensions (Oh, Mr. User? You need to make your display be THIS size for it to look right...) or JavaScript.