Positioning div absolute inside td does not work in firefox

Question

I am using jquery draggable to drag and drop the contents on the table cells that are part of editor. We are allowing users to directly drag and drop content to respective tds and use the template for creating prints and emails.

Whenever user drags over the table-cells of editor, a div with option to replace split and add are shown.

I am appending this div inside hovered td.

  <tr>           
    <td valign="top" height="200px" class="unlocked" replacesource="1" style="position: relative;">
          <h1><a target="blank" href="http://local.smgt.vg/img/b8oj6ck235uik/thumb-2q3t9tx.jpg">first</a>
          <br><br><a target="blank" href="http://local.smgt.vg/file/by1aj7n3uj4yz/contacts3.csv">second</a></h1>   
         <div class="contentdiv" style="position: absolute;">
            This will show options replace/split/add new 
         </div>
    </td>    
   </tr>  

The problem is position absolute for this div doesnt work in firefox.

And i can not wrap up the contents of td inside other div having position relative as suggested Here and Here . The reason being for this is i am not sure how complex the dom of td can be as we are allowing user to fully customize the contents inside it.

Link To Fiddle

works perfectly in Chrome though. Any other solution guys??

Answer 1

Instead of using <table> <tr> <td> </td></tr> </table> , try to design div as a table.

For your reference http://snook.ca/archives/html_and_css/getting_your_di . After this try your code, it may help you out.

Design div as table is best approach. This may be used for responsive design too.

Answer 2

<td valign="top" height="200px" class="unlocked" replacesource="1" style="position: relative;">
    <h1 style="position:absolute;"><a target="blank" href="http://local.amp.vg/img/b8oj6ck235uik/thumb-2q3t9tx.jpg">first</a><br>            <br>            <a target="blank" href="http://local.amp.vg/file/by1aj7n3uj4yz/contacts3.csv">second</a></h1>   
        <div class="contentdiv"> </div>

        </td>

you've given absolute position to <div class="contentdiv"> </div>

Remove absoute position for this and add absolute position for <h1> which is placed above to <div class="contentdiv"> </div> .

I've checked. It's working perfectly.

http://jsfiddle.net/qfquj/69/

The following are I modified.

    removed absolute position for 

.contentdiv{
    height:200px;
    width:300px;
    background: url('http://i.stack.imgur.com/2LvR1.jpg') no-repeat;
    color: black;
    background-size: 100% 100%;
    text-align: center;

    top:0;
    opacity:.6

 }

    and added inline css for h1

     <h1 style="position:absolute;">

Answer 3

Here is answer for your question. I hope this may help you.

http://jsfiddle.net/qfquj/73/

What I modified is,

Removed top:0  and added float:left

.contentdiv{
    height:200px;
    width:300px;
    background: url('http://i.stack.imgur.com/2LvR1.jpg') no-repeat;
    color: black;
    background-size: 100% 100%;
    text-align: center;
    position:absolute;

    opacity:0.6;
    float:left;  
 }

Added inline css float left for <h1>
<h1 style="float:left">

Answer 4

Firefox has a problem with absolute positioning whenever tables or display: table-cell is involved, where it will ignore the table cells as a relative parent.

It's a 13 year old Gecko bug .

You can fix this by reverting from the table structure and using display: inline-block on your cells for example, or putting another relative div around your table cell.