jquery - CSS Left and Top behaves differently in chrome, firefox and IE -

so have table containing 2 cells , want put element @ center of 1 cell. works expected in chrome not in ie or firefox. idea why happening? , how can make work across browsers?

it seems in firefox left attribute isn't right, positioned not parent block whole document. , in ie top attribute doesn't work.

jsfiddle example

<table style="height:500px;width:500px;table-layout:fixed">    <tr>     <td class='div'>         <span id='divelement'>       launching soon!!!!         </span>     </td>     <td style="background-color:red">     </td>    </tr> </table> #divelement{     position: absolute;     top: 50%;     left: 50%;     margin-top: -50px;     margin-left: -50px;     width: 100px;     height: 100px;     background-color: blue; }  .div{     position: relative;     background-color: yellow; } 

update:

the reason not using vertical-align:center because want not place in center.

so have element placed center , want place 2 elements @ fixed offset next centered element, 1 @ each side. , want offset fixed when window size changes. (the table take 100% of window , each td takes 50% when window size changes td size changes too)

the way came use absolute positioning , place 2 elements @ center first use margin push them [width/2 + fixoffset] of centered element

maybe there better way it?

new jsfiddle example

please see question: using position relative/absolute within td?

basically because position: relative has undefined behavior on table-cell elements (td or display: table-cell), meaning each browse implements wants, there no rules.

therefore in somecases might work (see chrome), not in others.

tackled same problem myself. , ended using divs, because needed sub elements positioned relatively container, outside of it.

if need center content please use vertical-align: middle instead of position: absolute - top: 50% - margin-top: -somepx combo

see edited fiddle