Firefox does not obey position:relative on display:table-cell elements?

HTML & CSS
1

I have a header element (.header in the css code below) that holds my “site title” (.siteTitle) and my “tagline” (.tagline)…

I want to allow the end user to control the header area height and I always want the tagline element anchored to the bottom of the header div and the siteTitle in the vertical middle of that area.

My css below works great in Chrome and IE9, however, in Firefox, despite the position:relative on the parent container (.header), the tagline is being moved to the bottom of the document, rather than the relatively positioned header, say what?

I’m guessing that the display:table-cell is throwing off the relative positioning contraint in FF? What would I need to do to make FF happy?

.header {background:url(header.png) 0 bottom no-repeat; height:100px; display:table-cell;vertical-align:middle;width:977px; position:relative; }
.siteTitle {float:left;margin:0 0 15px 200px;padding:5px; }
.siteTitle a {color:#fff;font-size:1.5em;}
.tagline {position:absolute; bottom:0; right:0; color:#777; background:url(header.gif); background:url(menu-shadow.png) bottom repeat-x, url(header.gif); width:747px; padding:10px 10px 9px 10px; border-radius:6px 6px 0 0; -moz-border-radius:6px 6px 0 0; font-style:italic; font-size:1.1em;}
2

Position on table-cells in not defined in the specs and you can’t really position something in relation to a table-cell. You’ll probably have to wrap the header in a div with position:relative set so that it acts as the stacking context for your absolute element.

3

Thanks Paul, given a parent container that’s relatively positioned with a fixed height of N pixels, how would you position a child element in the vertical middle of the parent?

position:absolute; bottom:50% ?

4

If the child element has a fixed height then you can simply say top:50% and margin-top:-xxpx (where xxpx equals half the elements height).

There are other ways of vertical centering unknown height elements within a fixed height parent but does depend on setup. I’d need to see an actual demo to see which was the best approach.