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>.

[1] http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width
(search for "guess" for some extra amusement)

-- 
---- Morten Stenshorne, developer, Opera Software ASA ----
------------------ http://www.opera.com/ -----------------

Received on Tuesday, 16 September 2014 08:25:06 UTC