RE: [CSS2.1] Position of absolute position box in relative box with text-align center

> Greg Whitworth <gwhit@microsoft.com> writes:
> 
> > Hello all, I have the great pleasure of bringing another 2.1 interop
> > issue to the list for discussion very close to the last one regarding
> > placement of absolute positioned boxes [1]. This one is interesting as
> > Chrome and FF place the box all the way to the left of the viewport
> > while IE places it at the center. Based on the 2.1 spec [3], I believe
> > that IE is doing the correct thing in this case. Here is a fiddle of
> > the interop issue: http://jsfiddle.net/9wsegz9s/ and here is the
> > markup with style inline for discussion:
> >
> > <body style="text-align: center;">
> > 	<div style="display: inline; position: relative;">
> >    		 <div id="parent" style="display: block; position: static;">
> >         			<div id="child" style=" display: block;
> > 	padding: 5em; background-color: green; position: absolute;
> > 	></div>
> 
> Note: Missing '"' after 'absolute'.
> 
> >    		</div>
> >        	</div>
> > </body>
> >
> > Since the wrapper box should be positioned at the center of the
> > viewport due to text-align[2] the next inline box should be starting
> > its positioning there as well. Thoughts?
> 
> text-align only affects inline content, not blocks. BODY will take up the entire
> viewport width minus margins, just like it does normally. The display:inline
> DIV will be empty, since it only contains block children (but yeah, its contents,
> had there been any, would be centered). The containing block of the
> "parent" DIV is BODY, so it will fit perfectly inside BODY, taking up all
> horizontal space. The absolutely positioned "child" DIV has no position
> specified, so we will try to position it as if it were not absolutely positioned
> [1]. If it were not absolutely positioned, it would be positioned at the top/left
> edge of "parent", i.e. flush with the left content edge of BODY. text-align is
> completely irrelevant here (but if you put text inside "child", it should of
> course be centered within "child"). If "left" or "right" properties had been
> specified on "child", on the other hand, they would be resolved relatively to
> the actual containing block, which is the inline DIV (since it's the nearest non-
> statically positioned ancestor), which is centered. left:0 would place the left
> edge of "child" in the center.
> 
> So if IE centers "child", it's wrong (although here on my computer IE gets it
> right too (that's IE10); i.e. it left-aligns "child"). The other browsers are right.
> 
> Also, please beware of quirks mode! It seems that you're running the test in
> quirks mode, and as far as I know, in IE, that will result in the document being
> rendered using an older engine that's pretty much compatible with IE5 or so.
> Better add <!DOCTYPE html>.

Gotcha, indeed it does seem to be a regression on our end. I'll get this submitted and fixed, thanks for the feedback!

Greg

Received on Tuesday, 16 September 2014 16:25:55 UTC