0

Maybe someone here can shine some light. Problem initially started with an animate({top}) on a div.cell that works on everything but Firefox but shortly after I realized that css 'top' is not respected in Firefox within cells.

Margin-top also won't work because you can only add padding within a div.table->cell.

Any ideas on how to animate without using padding-top (this might be outside of standards for div.cells and maybe the only one abiding by it is Firefox)?

Check out the jsfiddle I created on Chrome vs Firefox. It even works on Internet Exploder and Safari.

http://jsfiddle.net/tinymonkey1/yd94g/5/

HTML

<div class="table">
   <div class="row">
      <div class="cell" style="top:20px">
         Column 1
      </div>
      <div class="cell">
         Column 2
      </div>
   </div>
</div>
<div class="spacer"></div>
   <div class="demo">
      But this works !
   </div>
</div>

CSS

.table{display:table}
.table .row {display:table-row}
.table .row .cell {display:table-cell;position:relative}

.spacer{height:100px;width:100%}

.demo{}

JQuery

$('.table .row .cell').mouseenter(function(){
    $(this).animate({top:'20px'},300); 
});
$('.demo').mouseenter(function(){
    $(this).animate({'marginTop':'20px'},300);
});
tony
  • 160
  • 8
  • Is there any reason you use `display: table-cell` instead of `float: left` ? – Brewal Aug 15 '13 at 17:40
  • With div cells, you can align 100% of the width. If you float left, then you'd need to float the last div to the right so its flush with it's parent div. Then you need to tweak the spacing between them etc, etc... With this set up, the cells will inherently span 100% of the div and be evenly spaced. – tony Aug 15 '13 at 21:51

1 Answers1

1

If you set your display to inline-block, it should work.

.table .row .cell {display:inline-block;position:relative}

See: JsFiddle

A helpful and informative related answer can be found here:

Does Firefox support position: relative on table elements?

In summary: No, relative position on table elements is not supported in Firefox?

Community
  • 1
  • 1
Gray
  • 7,050
  • 2
  • 29
  • 52