Question

I am trying to set the position of a div within a table cell (with a relative position) to absolute and it works great in Chrome and IE, but in FF it seems as if it’s just positioned absolute in relation to the entire body.

I’m trying to get my div to display in the top left of the cell (the link is just used to position another element in my code, but that should be positioned in the upper right of the cell). However in FF the div is displayed in the top left of the entire screen and the (element positioned by the) link in the top right of the entire screen.

Here’s the relevant code:

<TD ID="EVENT" style="position:relative;">
<a href="#" id="Menu" style="position:absolute;top:0;right:0;"></a>
    <div id="detail" style="position:absolute;top:0;left:0;width:100%;z-index:10;">
    content
</div>
</TD>

Answer 1

I’m not sure if this is relevant to the problem, but you’re missing a quote mark in your table cell:

<TD ID="EVENT style="position:relative;">

Should read:

<TD ID="EVENT" style="position:relative;">

That sort of thing has caused problems for me in the past, although if it’s ok in other browsers maybe that isn’t causing the problem.

EDIT: Try using a container div inside the table cell.

    <TD ID="EVENT">

      <div id="container" style="position:relative;">

        <a href="#" id="Menu" style="position:absolute;top:0;right:0;"></a>
        <div id="detail" style="position:absolute;top:0;left:0;width:100%;z-index:10;">
        content
        </div>

      </div>

    </TD>