Nesting Absolute Elements in Relative Elements Firefox

Question

Possible Duplicate:
Does Firefox support position: relative on table elements?

Does Firefox ignore relative positioning on table cells?

I am trying to nest an absolute positioned element inside a relatively positioned table cell but Firefox is ignoring the relative positioning on the table cell and the absolutely positioned element is positioned according to the browser window.

HTML:

<table><tbody><tr><td><span></span></td></tr></tbody></table>

CSS:

table{
    width:500px;
    height:50px;
}
td {
    position:relative;
    width:50%;
}
span {
    position:absolute;
    right:0;
    display:block;
    background:#333;
    width:20px;
    height:20px;
}

Here's an example on jsfiddle.

The proper formatting of this would be to have the span be positioned approximately at the horizontal center of the result window, but Firefox would position it all the way to the right of the window. Any workaround for this while the element remains absolutely positioned and no static numbers for the right/left/margin properties... Thanks.

score 1 · Accepted Answer · answered Mar 09 '12 at 21:28

1

Add

position: relative;

To your table...

table{
    position: relative;
    width:500px;
    height:50px;
}

Here's an example

answered Mar 09 '12 at 21:28

PREEB

1,320
2
14
27

Ahh I see... but why wouldn't it work with my HTML? http://jsfiddle.net/ecBm9/ – henryaaron Mar 09 '12 at 21:38
this is more like it. Why can't you use the natural flow of the table to keep the element where you want it? Why does it have to be absolute? Help me understand your thought process here. – PREEB Mar 09 '12 at 21:49
You can have it positioned relative and it stays left of the text "I wish to receive occasional newsletter emails." That's what you're going for right? Or do you actually need it to stay on the right side of the screen? – PREEB Mar 09 '12 at 21:51
The element must be positioned absolutely have a look at this in Webkit browser and you'll see what I accomplish by absolutely positioning the checkbox. http://jsfiddle.net/ecBm9/2/ – henryaaron Mar 09 '12 at 21:53
I'm talking about the checkbox... – henryaaron Mar 09 '12 at 21:53
[This looks good](http://jsfiddle.net/ecBm9/4/) to me. – PREEB Mar 09 '12 at 21:59
No, the checkbox is not being contained in the `` – henryaaron Mar 09 '12 at 22:08
I guess I'm not seeing what you're seeing then. I have Firefox v10.0.2 for Windows XP. What version do you have? I've seen browsers react differently depending on the OS. – PREEB Mar 09 '12 at 22:11

score 1 · Answer 2 · answered Mar 09 '12 at 21:36

1

Move the position:relative off the td and onto the table.

answered Mar 09 '12 at 21:36

j08691

204,283
31
260
272

score 0 · Answer 3 · answered Mar 09 '12 at 21:29

Actually, the top of the span is placed at the middle of the table cell - I guess because the element has an absolute position and it is in a table cell.

You can set a negative top margin that equals half the size of the span element:

span {
    ...
    height:20px;
    margin-top: -10px; /* this one */
}

DEMO

score 0 · Answer 4 · answered Mar 09 '12 at 21:33

This is true, Firefox does ignore it, as per the specs:

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

One common solution is to put a division inside the cell with display: relative and then the absolute positioning will work inside that, but this is really up to how you are using the table. If you are using it for layout, I would suggest finding an alternate way of achieving the layout. If it's tabular data, would floats work for you instead?

Unfortunately, floats would not work... the element must be positioned absolutely — henryaaron, Mar 09 '12 at 21:38

Nesting Absolute Elements in Relative Elements Firefox

4 Answers4