Firefox but w absolute positioning of display:table child elements

HTML & CSS
1

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.

Is there a workaround to make FF behave?

<div class="pre-footer">
	<div class="box s5">
		<h4>Social Media Links</h4>
		<div class="textwidget">
			<ul class="social">
				<li class="twitter"><a href="http://twitter.com"></a></li>
				<li class="facebook"><a href="http://facebook.com"></a></li>
				<li class="youtube"><a href="http://youtube.com"></a></li>
			</ul>
		</div>
	</div>
</div>


.pre-footer .box.s1,.pre-footer .box.s2,.pre-footer .box.s3,.pre-footer .box.s4{display:table-cell;float:none;padding:15px;}
.pre-footer{display:table;width:960px;clear:both;border-spacing:10px;margin-left:-20px;position:relative}
.pre-footer .clear{display:none}
.pre-footer .box h4:first-child {padding:0 ;margin:0;}
.pre-footer .box.s5 {max-width:200%; width:400px; position:absolute; bottom:-90px; z-index:9999; padding:0; text-align:left;left:0;}
2

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

3

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.

4

So now its a bug if Firefox does what makes sense and the other browsers allow meaningless garbage?

5

Yep, I actually got it working by placing a position:relative on the fixed-width container outside .pre-footer

6

Slow down there felgal.

“Meaningless garbage” is a bit harsh.

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.

7

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.

8

Exactly. Reread the post.

.pre-footer{display:table;width:960px;clear:both;border-spacing:10px;margin-left:-20px;position:relative}
.pre-footer .box.s1,.pre-footer .box.s2,.pre-footer .box.s3,.pre-footer .box.s4{display:table-cell;float:none;padding:15px;}

9

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.

10

Point taken, but that’s a side issue to the main point you were asserting, as I’ve quoted you - just sayin.

11

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.

12

Felgal, truce. You win!!!

Mods, please close this thread already.

13

I stopped arguing around like pre 1000 posts. I never won anyways lol

14