I’m trying to absolutely position an element relative to its parent container. It works perfectly in all modern browsers I’ve tested in except Firefox.
The parent container (“.pre-footer” below) has display:table and position:relative with a fixed width of 960px. The child container (“.box.s5”) is absolutely positioned.
The problem I’m having is that Firefox positions it relative to the viewport and not the parent.
It only makes sense to apply position:relative to display:table-cell elements within the display:table.The table should only directly contain table-row and/or table-cell elements.
If you don’t want it to act like a table then get rid of the display:table
I ran into that bug a long time ago in one of my demos. There was no work around that I could find. I had to resort to positioning it at the bottom with margins. If your container is a fixed height you can do that too.
Not sure how you are convinced that IE9, Chrome, Safari and Opera are all wrong and FF is right but I found a workaround that even FF agrees with, the fixed-width grandparent container needed position:relative (so, I suppose FF is wrong after all)
FYI: there are several sibling elements that all need table display to have equal width within the container. I didn’t include them in the example because that’s not the point of the question. But I can see that you might take offense to using display:table on a single element.
Shouldn’t they be using display:table-cell and have their parent defined as display:table in order to have them all work correctly the way you want.
Separate display:table elements should not have any relationship to one another.
At the very minimum a meaningful CSS table needs a display:table-cell inside the display:table for it to mean anything different from display:block - without at least the two you don’t have anything for the table layout to work with. Presumably the browsers expect that as a minimum and don’t care what happens if someone doesn’t supply the minimum - after all garbage in, garbage out.
And as I said before the position:relative is meaningless when placed on the display:table element - the display:table should override the position:relative as it doesn’t make sense to have a display:table as anything other than position:static. It has to go on the display:table-cell element or outside of the table.
How is what I said to start with a side point to the side point that I added to clarify what I said to start with.
Main point: display:table;positiion:relative = nonsense - position:relative either needs to be outside the display:table or on the display:table-cell
Clarification: One or more display:table-cell inside a display:table acts like a table and so trying to make it not act like a table by adding position:relative is nonsense - the minimum you need for a table is a display:table-cell inside a display:table and that display:table-cell defines the positioning within the table so the positiion:relative MUST be ignored in order for the table to make sense as a table.