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

Question

So I have a table containing two cells and I want to put an element at the center of one cell. It works as expected in Chrome but not in IE or Firefox. Any idea why it is happening? And how can I make it work across browsers?

It seems that in Firefox the left attribute isn't right, it is positioned not to the parent block but to the whole document. And in IE the top attribute doesn't work.

JSfiddle example

<table style="height:500px;width:500px;table-layout:fixed">
   <tr>
    <td class='div'>
        <span id='divElement'>
      We are 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 I am not using vertical-align:center is because what I really want to do is actually not just place it in center.

So I have an element placed to center and want to place two elements at fixed offset next to that centered element, one at each side. And I want the offset to be fixed even when window size changes. (The table will take 100% of window and each td takes 50% so when window size changes td size changes too)

The way I came up with is to use absolute positioning and place two elements at center first then use margin to push them by the [width/2 + fixOffset] of the centered element

Maybe there is a better way to do it?

New JSFiddle example

possible duplicate of [Using Position Relative/Absolute within a TD?](http://stackoverflow.com/questions/4564638/using-position-relative-absolute-within-a-td) — cimmanon, Mar 24 '14 at 23:28

score 1 · Accepted Answer · edited May 23 '17 at 12:24

1

Please see question: Using Position Relative/Absolute within a TD?

Basically it is because the position: relative has undefined behavior on table-cell elements (td or anything display: table-cell), meaning that each browse implements it as it wants, there are no rules.

Therefore in somecases it might work (see chrome), but not in others.

Tackled the same problem myself. And ended up using divs, because I really needed sub elements positioned relatively to the container, outside of it.

If you only need to center the content please use vertical-align: middle instead of the position: absolute - top: 50% - margin-top: -somepx combo

See edited fiddle

edited May 23 '17 at 12:24

Community

1
1

answered Mar 24 '14 at 22:37

Matyas

13,473
3
60
73

Quick and right answer! Even before I can flag it. I will need to put the class not on TD but add a div wrap I guess – user3282171 Mar 24 '14 at 22:40
1

you mean vertical-align: middle; – Johansrk Mar 24 '14 at 22:42
Please see my comment below, I actually wanted to do more than just place it centered. – user3282171 Mar 24 '14 at 22:59
1

@Matyas The "undefined" behavior is not a property of td elements but all table-cell elements (including elements with `display: table-cell` applied to them). – cimmanon Mar 24 '14 at 23:30

score 1 · Answer 2 · answered Mar 24 '14 at 22:48

1

Why, oh why would you use absolute positioning for this …?

You are in a table cell already – and there text-align and vertical-align work perfectly for centering inline content:

.div{
    background-color: yellow;
    text-align:center;
    vertical-align:middle;
}

#divElement{
    display:inline-block;
    width: 100px;
    height: 100px;
    background-color: blue;
}

http://jsfiddle.net/828YG/3/

answered Mar 24 '14 at 22:48

CBroe

91,630
14
92
150

What I really want to do is actually not place it in center. So I have an element placed to center and want to place two elements at fixed distance next to that centered element. And I want the distance to be fixed even when window size changes. So the way I came up with is to place this two element at center first then use margin to push them by the width/2 of the centered element Maybe there is a better way to do it? – user3282171 Mar 24 '14 at 22:53

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

2 Answers2