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. enter image description here

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

possible duplicate of [Firefox ignores absolute positioning in table cells](http://stackoverflow.com/questions/8789661/firefox-ignores-absolute-positioning-in-table-cells) — CBroe, Nov 12 '13 at 11:56
i have already mentioned that wrapping up div is not the solution i am looking for. — Milind Anantwar, Nov 12 '13 at 11:57

score 2 · Accepted Answer · answered Nov 12 '13 at 11:57

2

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.

answered Nov 12 '13 at 11:57

Jeeva J

3,173
10
38
85

The whole editor is designed in such a way that it allows user to create and design the templates. i can not simply go ahead and make the changes. This well brake the whole existing functionality(like adding rows/columns/using radcontrols etc.) – Milind Anantwar Nov 12 '13 at 12:01
Check I'v updated your fiddle. See this is working as per my another answer. http://jsfiddle.net/qfquj/69/ . – Jeeva J Nov 12 '13 at 12:57

Jeeva J · Answer 2 · 2013-11-12T13:06:48.510

<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('https://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;">

score 1 · Answer 3 · answered Nov 12 '13 at 13:21

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('https://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">

score 1 · Answer 4 · answered Nov 14 '13 at 15:13

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.

Positioning div absolute inside td does not work in firefox

4 Answers4