W3C home > Mailing lists > Public > public-css-commits@w3.org > October 2011

csswg/css3-positioning Overview.html,1.4,1.5 Overview.src.html,1.6,1.7 changebar.png,1.1,NONE clip.png,1.1,NONE clip2.png,1.1,NONE clip_002.png,1.1,NONE flow-abs-rel.png,1.1,NONE flow-absolute.png,1.1,NONE flow-clear.png,1.1,NONE flow-clear2.png,1.1,NONE flow-float.png,1.1,NONE flow-generic.png,1.1,NONE flow-relative.png,1.1,NONE flow-static.png,1.1,NONE frame-src.html,1.2,NONE frame.png,1.1,NONE stack.png,1.1,NONE

From: Arron Eicholz via cvs-syncmail <cvsmail@w3.org>
Date: Sat, 29 Oct 2011 00:11:28 +0000
To: public-css-commits@w3.org
Message-Id: <E1RJwWG-0007Bb-3y@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-positioning
In directory hutz:/tmp/cvs-serv27563

Modified Files:
	Overview.html Overview.src.html 
Removed Files:
	changebar.png clip.png clip2.png clip_002.png flow-abs-rel.png 
	flow-absolute.png flow-clear.png flow-clear2.png 
	flow-float.png flow-generic.png flow-relative.png 
	flow-static.png frame-src.html frame.png stack.png 
Log Message:
Moved images to image folder
Corrected text for position: center

--- flow-absolute.png DELETED ---

--- frame.png DELETED ---

--- changebar.png DELETED ---

--- flow-generic.png DELETED ---

Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-positioning/Overview.html,v
retrieving revision 1.4
retrieving revision 1.5
diff -u -d -r1.4 -r1.5
--- Overview.html	28 Oct 2011 00:52:21 -0000	1.4
+++ Overview.html	29 Oct 2011 00:11:24 -0000	1.5
@@ -9,6 +9,8 @@
   <link href=default.css rel=stylesheet type="text/css">
   <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
   type="text/css">
+  <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
+  type="text/css">
 
   <style type="text/css">
             .cb-example-table
@@ -50,7 +52,7 @@
                 font: inherit;
             }
[...1255 lines suppressed...]
     </ul>
 
    <li>viewport, <a href="#viewport0" title=viewport><strong>2.</strong></a>
@@ -4350,7 +4234,7 @@
     <tr>
      <th><a class=property href="#position">position</a>
 
-     <td>static | relative | absolute | page | fixed | center
+     <td>static | relative | absolute | page | center | fixed
 
      <td>static
 
@@ -4408,7 +4292,6 @@
      <td>N/A
   </table>
   <!--end-properties-->
-  </body>
 </html>
 <!-- Keep this comment at the end of the file
 Local variables:

--- flow-clear.png DELETED ---

--- frame-src.html DELETED ---

--- clip.png DELETED ---

--- flow-float.png DELETED ---

--- flow-relative.png DELETED ---

--- clip2.png DELETED ---

--- stack.png DELETED ---

Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-positioning/Overview.src.html,v
retrieving revision 1.6
retrieving revision 1.7
diff -u -d -r1.6 -r1.7
--- Overview.src.html	28 Oct 2011 00:52:21 -0000	1.6
+++ Overview.src.html	29 Oct 2011 00:11:24 -0000	1.7
@@ -4,8 +4,8 @@
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
         <title>CSS Positioned Layout Module Level 3</title>
         <link rel="stylesheet" type="text/css" href="default.css">
-        <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css">
         <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-ED.css">
+        <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css">
         <style type="text/css">
             .cb-example-table
             {
@@ -250,7 +250,7 @@
         <div class="example">
             <p>With no positioning, the containing blocks (C.B.) in the following document:</p>
 <pre><code class="html">
-&lt;!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN"&gt;
+&lt;!DOCTYPE html&gt;
 &lt;html&gt;
     &lt;head&gt;
         &lt;title&gt;Illustration of containing blocks&lt;/title&gt;
@@ -436,7 +436,7 @@
             In the absolute positioning model, a box is explicitly offset with respect to its 
             <span>containing block</span>. It is removed from the <span>normal flow</span> entirely (it has no impact on later 
             siblings). An absolutely positioned box establishes a new <span>containing block</span> for normal 
-            flow children and absolutely (but not fixed) positioned descendants. However, the 
+            flow children and absolutely (but not fixed or page) positioned descendants. However, the 
             contents of an absolutely positioned element do not flow around any other boxes. They 
             may obscure the contents of another box (or be obscured themselves), depending on the 
             stack levels of the overlapping boxes.
@@ -452,7 +452,7 @@
             In the page positioning model, a box is explicitly offset with respect to its <span>initial 
             containing block</span>. It is removed from the <span>normal flow</span> entirely (it has no impact on later 
             siblings). A page positioned box establishes a new <span>containing block</span> for <span>normal flow</span> 
-            children and absolutely (but not fixed, or page) positioned descendants. However, the 
+            children and absolutely (but not fixed or page) positioned descendants. However, the 
             contents of a page positioned element do not flow around any other boxes. They may 
             obscure the contents of another box (or be obscured themselves), depending on the 
             stack levels of the overlapping boxes.
@@ -469,6 +469,22 @@
         </p>
         <!-- End section: Page positioning -->
 
+        <h3 id="center-positioning"><span class="index-def" title="center positioning|center position|center positioned">Center positioning</span></h3>
+        <p>
+            In the center positioning model, a box is explicitly centered with respect to its 
+            <span>containing block</span>. It is removed from the <span>normal flow</span> entirely (it has no impact on later 
+            siblings). A center positioned box establishes a new <span>containing block</span> for normal 
+            flow children and absolutely (but not fixed or page) positioned descendants. However, the 
+            contents of an center positioned element do not flow around any other boxes. They 
+            may obscure the contents of another box (or be obscured themselves), depending on the 
+            stack levels of the overlapping boxes.
+        </p>
+        <p>
+            References in this specification to an <span class="index-def" title="absolute positioned element/box">absolutely positioned element</span> (or its box) 
+            imply that the element&#39;s 'position' property has the value <span title="'position'!!''absolute''">''absolute''</span> or <span title="'position'!!''fixed''">''fixed''</span>.
+        </p>
+        <!-- End section: Absolute positioning -->
+
         <h3 id="fixed-positioning"><span class="index-def" title="fixed positioning|fixed position|fixed positioned">Fixed positioning</span></h3>
         <p>
             Fixed positioning is similar to absolute positioning. The only difference is that 
@@ -488,16 +504,17 @@
             </p>
             <div class="figure">
                 <p>
-                    <img src="frame.png" alt="Example of frame layout">
-                    <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-frame" href="http://www.w3.org/TR/CSS2/images/longdesc/frame-desc.html" title="Long description for frame layout example">[D]</a></span>
+                    <img src="images/frame.png" alt="Example of frame layout">
+                    <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-frame" href="images/longdesc/frame-desc.html" title="Long description for frame layout example">[D]</a></span>
+                    <span class="slink">&nbsp;&nbsp;&nbsp;<a id="source-frame" href="source/frame-src.html" title="Source code for frame layout example">[S]</a></span>
                 </p>
             </div>
             <p>This might be achieved with the following HTML document and style rules:</p>
 <pre><code class="html">
-&lt;!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN"&gt;
+&lt;!DOCTYPE html&gt;
 &lt;html&gt;
   &lt;head&gt;
-    &lt;title&gt;A frame document with CSS 2.1&lt;/title&gt;
+    &lt;title&gt;A frame document with CSS&lt;/title&gt;
     &lt;style type="text/css" media="screen"&gt;
       body { height: 8.5in } /* Required for percentage heights below */
       #header {
@@ -546,7 +563,6 @@
   &lt;/body&gt;
 &lt;/html&gt;
 </code></pre>
-<span class="slink">&nbsp;&nbsp;&nbsp;<a id="frame-source" href="frame-src.html" title="Source code for frame layout example">[S]</a></span>
         </div>
         <!-- End section: Fixed positioning -->
         <!-- End section: Positioning schemes -->
@@ -563,7 +579,7 @@
             </tr>
             <tr>
                 <th>Value:</th>
-                <td><var>static</var> | <var>relative</var> | <var>absolute</var> | <var>page</var> | <var>fixed</var> | <var>center</var></td>
+                <td><var>static</var> | <var>relative</var> | <var>absolute</var> | <var>page</var> | <var>center</var> | <var>fixed</var></td>
             </tr>
             <tr>
                 <th>Initial:</th>
@@ -651,10 +667,21 @@
                     <a href="http://dev.w3.org/csswg/css3-regions/Overview.html#flow-into">'flow-into'</a> property 
                     of the CSS Regions Module [[!CSS3-REGIONS]].
                 </p>
-                <p class="issue">
-                    There have been some discussions about the naming of the property value <span title="'position'!!''page''">''page''</span>. 
-                    If you have any suggestions please email the mailing list.
-                </p>
+            </dd>
+            <p class="issue">
+                There have been some discussions about the naming of the property value <span title="'position'!!''page''">''page''</span>. 
+                If you have any suggestions please email the mailing list.
+            </p>
+            <dt><dfn title="'position'!!''center''">center</dfn></dt>
+            <dd>
+                The box&#39;s position (and possibly size) is specified with the 'top', 'right', 
+                'bottom', and 'left' properties. The box is vertically and horizontally centered 
+                within its <span>containing block</span> and these properties specify offsets with respect to 
+                the box&#39;s centered position within its <span>containing block</span>. Center 
+                positioned boxes are taken out of the normal flow. This means they have no impact on 
+                the layout of later siblings. Though center positioned boxes may have margins, those 
+                margins do not <a href="http://www.w3.org/TR/CSS2/box.html#collapsing-margins">collapse</a>
+                with any other margins.
             </dd>
             <dt><dfn title="'position'!!''fixed''">fixed</dfn></dt>
             <dd>
@@ -686,17 +713,6 @@
                     <a href="http://www.w3.org/TR/CSS2/page.html#outside-page-box">"Content outside the page box"</a>.
                 </p>
             </dd>
-            <dt><dfn title="'position'!!''center''">center</dfn></dt>
-            <dd>
-                The box&#39;s position (and possibly size) is specified with the 'top', 'right', 
-                'bottom', and 'left' properties. The box is vertically and horizontally centered 
-                within its <span>containing block</span> and these properties specify offsets with respect to 
-                the box&#39;s centered position within its <span>containing block</span>. Center 
-                positioned boxes are taken out of the normal flow. This means they have no impact on 
-                the layout of later siblings. Though center positioned boxes may have margins, those 
-                margins do not <a href="http://www.w3.org/TR/CSS2/box.html#collapsing-margins">collapse</a>
-                with any other margins.
-            </dd>
         </dl>
         <p>
             In previous versions of CSS user agents may treat position <span title="'position'!!''fixed''">''fixed''</span> as <span title="'position'!!''static''">''static''</span> on 
@@ -716,7 +732,7 @@
             </tr>
             <tr>
                 <th>Value:</th>
-                <td><var>auto</var> | <var>parent</var> | <var>container</var> | <var>root</var> | <var>viewport</var> | <var>nth-parent()</var> | <var>element()</var></td>
+                <td><var>auto</var> | <var>parent</var> | <var>container</var> | <var>root</var> | <var>nth-parent()</var> | <var>element()</var></td>
             </tr>
             <tr>
                 <th>Initial:</th>
@@ -744,7 +760,7 @@
             </tr>
             <tr>
                 <th>Computed&nbsp;value:</th>
-                <td>specified value</td>
+                <td>specified value, but see prose</td>
             </tr>
         </table>
         <p>The values of this property have the following meanings:</p>
@@ -755,19 +771,18 @@
             </dd>
             <dt><dfn title="'position-reference'!!''parent''">parent</dfn></dt>
             <dd>
-                
+                Use the parent element as the <span>containing block</span> for the positioned element.
             </dd>
             <dt><dfn title="'position-reference'!!''container''">container</dfn></dt>
             <dd>
-                
+                Use the container as the <span>containing box</span>.<br>
+                In the case of multi-column layout the individual column defines the containing 
+                block even though the individual column is not an actual element "block box". If 
+                not inside a multi-column element then this value computes to ''auto''.
             </dd>
             <dt><dfn title="'position-reference'!!''root''">root</dfn></dt>
             <dd>
-                
-            </dd>
-            <dt><dfn title="'position-reference'!!''viewport''">viewport</dfn></dt>
-            <dd>
-                
+                Use the root element (for HTML and XHTML the html element) as the <span>containing block</span> for the positioned element.
             </dd>
             <dt><dfn title="'position-reference'!!''nth-parent()''">nth-parent()</dfn></dt>
             <dd>
@@ -1025,7 +1040,7 @@
         <!-- End section: Box offsets: 'top', 'right', 'bottom', 'left'  -->
 
         <h2 id="size-and-position-details">Sizing and positioning details</h2>
-        <h3 id="width-of-absolute-non-replaced-elements">The width of absolute, page or fixed positioned, non-replaced element</h3>
+        <h3 id="width-of-absolute-non-replaced-elements">The width of absolute, page or fixed positioned, non-replaced elements</h3>
         <p>The constraint that determines the used values for these elements is:</p>
         <p>
             <code>
@@ -1076,8 +1091,8 @@
         </ol>
         <!-- End section: The width of absolute, page or fixed positioned, non-replaced element -->
 
-        <h3 id="width-of-center-positioned-non-replaced-elements">The width of a center positioned, non-replaced element</h3>
-        <p>The constraint that determines the used values for these elements is:</p>
+        <h3 id="width-of-center-positioned-non-replaced-elements">The width of a center positioned, non-replaced elements</h3>
+        <p>The following constraints must hold among the used values of the other properties:</p>
         <p>
             <code>
                 'left' + <span>'margin-left'</span> + <span>'border-left-width'</span> + <span>'padding-left'</span> +
@@ -1085,120 +1100,35 @@
                 'right' = <span>width of containing block</span>
            </code>
         </p>
-        <p>First set any ''auto'' values for 'margin-left' and 'margin-right' to ''0''.</p>
-        <p>If any of 'left' or 'right' are ''auto'', set them to ''50%''.</p>
-        <p>If neither 'left' nor 'right' are set to a percentage:</p>
-        <ul>
-            <li>If 'width' is ''auto'', 'width' is determined using the equation above.</li>
-            <li>
-                Otherwise, if 'direction' is ''ltr'' (''rtl''), the values are over-constrained. 
-                Ignore the value for 'right' ('left'). Then solve for 'right' ('left').
-            </li>
-        </ul>
-        <p>Otherwise, if both 'left' and 'right' are set to a percentage:</p>
-        <ul>
-            <li>
-                If 'width' is ''auto'', then the width is shrink-to-fit. If this results in an 
-                outer width wider than the containing block width, then set the width so that the 
-                outer width is the containing block width.
-            </li>
-            <li>
-                If 'direction' is ''ltr'' set 'left' and 'right' as follows:
-                <p>
-                    <code>
-                        computed value of 'left' = 'left' percentage * width of containing block - 
-                        'left' percentage * (<span>'margin-left'</span> + <span>'border-left-width'</span> 
-                        + <span>'padding-left'</span> + 'width' + <span>'padding-right'</span> + 
-                        <span>'border-right-width'</span> + <span>'margin-right'</span>)
-                    </code>
-                </p>
-                <p>
-                    <code>
-                        computed value of 'right' = width of containing block - computed value of 'left' 
-                        - <span>'margin-left'</span> - <span>'border-left-width'</span> - 
-                        <span>'padding-left'</span> - 'width' - <span>'padding-right'</span> - 
-                        <span>'border-right-width'</span> - <span>'margin-right'</span>
-                    </code>
-                </p>
-            </li>
-            <li>
-                Otherwise, if 'direction' is ''rtl'' set 'left' and 'right' as follows:
-                <p>
-                    <code>
-                        computed value of 'right' = 'right' percentage * width of containing block - 
-                        'right' percentage * (<span>'margin-left'</span> + 
-                        <span>'border-left-width'</span> + <span>'padding-left'</span> + 'width' + 
-                        <span>'padding-right'</span> + <span>'border-right-width'</span> + 
-                        <span>'margin-right'</span>)
-                    </code>
-                </p>
-                <p>
-                    <code>
-                        computed value of 'left' = width of containing block - computed value of 
-                        'right' - <span>'margin-left'</span> - <span>'border-left-width'</span> - 
-                        <span>'padding-left'</span> - 'width' - <span>'padding-right'</span> - 
-                        <span>'border-right-width'</span> - <span>'margin-right'</span>
-                    </code>
-                </p>
-            </li>
-        </ul>
-        <p>Otherwise, if 'left' is set to a percentage, 'right' is a length:</p>
-        <ul>
-            <li>
-                If 'width' is not ''auto'', the values are over constrained. Ignore 'left' 
-                (regardless of 'direction') and use the equality at the beginning of this section to 
-                derive the computed value for 'width'.
-            </li>
-            <li>
-                Otherwise, 'width' is ''auto''. Derive 'left' and 'width' under the following constraints:
-                <p>
-                    <code>
-                        computed value of 'left' = 'left' percentage * width of containing block - 
-                        'left' percentage * (<span>'margin-left'</span> + <span>'border-left-width'</span> 
-                        + <span>'padding-left'</span> + 'width' + <span>'padding-right'</span> + 
-                        <span>'border-right-width'</span> + <span>'margin-right'</span>)
-                    </code>
-                </p>
-                <p>
-                    <code>
-                        'left' + (<span>'margin-left'</span> + <span>'border-left-width'</span> + 
-                        <span>'padding-left'</span> + 'width' + <span>'padding-right'</span> + 
-                        <span>'border-right-width'</span> + <span>'margin-right'</span>) + 'right' = 
-                        width of containing block
-                    </code>
-                </p>
-            </li>
-        </ul>
-        <p>otherwise, 'right' is a percentage and 'left' is a length:</p>
-        <ul>
-            <li>
-                If 'width' is not ''auto'', the values are over constrained. Ignore 'right' 
-                (regardless of 'direction') and use the equality at the beginning of this section to 
-                derive the computed value for 'width'.
-            </li>
-            <li>
-                Otherwise, 'width' is ''auto''. Derive 'right' and 'width' under the following constraints:
-                <p>
-                    <code>
-                        computed value of 'right' = 'right' percentage * width of containing block - 
-                        'right' percentage * (<span>'margin-left'</span> + <span>'border-left'</span> 
-                        + <span>'padding-left'</span> + 'width' + <span>'padding-right'</span> + 
-                        <span>'border-right'</span> + <span>'margin-right'</span>)
-                    </code>
-                </p>
-                <p>
-                    <code>
-                        'left' + (<span>'margin-left'</span> + <span>'border-left'</span> + 
-                        <span>'padding-left'</span> + 'width' + <span>'padding-right'</span> + 
-                        <span>'border-right'</span> + <span>'margin-right'</span>) + 'right' = 
-                        width of containing block
-                    </code>
-                </p>
-            </li>
-        </ul>
+        <p>
+            If 'width' is not ''auto'' and 'margin-left' + 'border-left-width' + 'padding-left' + 
+            'width' + 'padding-right' + 'border-right-width' + 'margin-right' (plus any of 'left' or 
+            'right' that are not ''auto'') is larger than the width of the <span>containing block</span>, then 
+            any ''auto'' values for 'left' or 'right' are, for the following rules, treated as zero.
+        </p>
+        <p>
+            If all of the above have a computed value other than ''auto'', the values are said to be 
+            "over-constrained" and one of the used values will have to be different from its 
+            computed value. If the 'direction' property of the <span>containing block</span> has the value 
+            ''ltr'', the specified value of 'right' is ignored and the value is calculated so as to 
+            make the equality true. If the value of 'direction' is ''rtl'', this happens to 'left' 
+            instead.
+        </p>
+        <p>
+            If there is exactly one value specified as ''auto'', its used value follows from the 
+            equality.
+        </p>
+        <p>
+            If 'width' is set to ''auto'', any other ''auto'' values become ''0'' and 'width' 
+            follows from the resulting equality.
+        </p>
+        <p>
+            If both 'left' and 'right' are ''auto'', their used values are equal. This horizontally 
+            centers the element with respect to the edges of the <span>containing block</span>.
+        </p>
         <!-- End section: The width of a center positioned, non-replaced element -->
 
-        <h3 id="width-of-absolute-replaced-elements">The width of absolute, page or fixed positioned, replaced element</h3>
+        <h3 id="width-of-absolute-replaced-elements">The width of absolute, page or fixed positioned, replaced elements</h3>
         <p>
             If 'height' and 'width' both have computed values of ''auto'' and the element also has an 
             intrinsic width, then that intrinsic width is the used value of 'width'.
@@ -1262,12 +1192,19 @@
         </ol>
         <!-- End section: The width of absolute, page or fixed positioned, replaced element -->
 
-        <h3 id="width-of-center-replaced-elements">The width of a center positioned, replaced element</h3>
-        <p class="issue">Need to come up with a definition for replaced elements</p>
+        <h3 id="width-of-center-replaced-elements">The width of a center positioned, replaced elements</h3>
+        <p>
+            The used value for 'width' is determined as for "<a href="#width-of-absolute-replaced-elements">The width of absolute, page or fixed 
+            positioned, replaced elements</a>".
+        </p>
+        <p>
+            Then the rules for "<a href="#width-of-center-positioned-non-replaced-elements">The width of a center positioned, non-replaced elements</a>" are 
+            applied to determine the centering.
+        </p>
         <!-- End section: The width of a center positioned, replaced element -->
 
 
-        <h3 id="height-of-absolute-non-replaced-elements">The height of absolute, page or fixed positioned, non-replaced element</h3>
+        <h3 id="height-of-absolute-non-replaced-elements">The height of absolute, page or fixed positioned, non-replaced elements</h3>
         <p>
             For absolutely positioned elements, the used values of the vertical dimensions must 
             satisfy this constraint:
@@ -1293,7 +1230,7 @@
         <ol>
             <li>
                 'top' and 'height' are ''auto'' and 'bottom' is not ''auto'', then the height is based on the 
-                <a href="http://www.w3.org/TR/CSS2/visudet.html#root-height">''Auto'' heights for block formatting context roots</a>, 
+                <a href="#root-height">''Auto'' heights for block formatting context roots</a>, 
                 set ''auto'' values for 'margin-top' and 'margin-bottom' to ''0'', and solve for 'top'.
             </li>
             <li>
@@ -1303,7 +1240,7 @@
             </li>
             <li>
                 'height' and 'bottom' are ''auto'' and 'top' is not ''auto'', then the height is based 
-                on the <a href="http://www.w3.org/TR/CSS2/visudet.html#root-height">''Auto'' heights for block formatting context roots</a>, 
+                on the <a href="#root-height">''Auto'' heights for block formatting context roots</a>, 
                 set ''auto'' values for 'margin-top' and 'margin-bottom' to ''0'', and solve for 'bottom'.
             </li>
             <li>
@@ -1321,8 +1258,8 @@
         </ol>
         <!-- End section: The height of absolute, page or fixed positioned, non-replaced element -->
 
-        <h3 id="height-of-center-non-replaced-elements">The height of a center positioned, non-replaced element</h3>
-        <p>The constraint that determines the used values for these elements is:</p>
+        <h3 id="height-of-center-non-replaced-elements">The height of a center positioned, non-replaced elements</h3>
+        <p>The following constraints must hold among the used values of the other properties:</p>
         <p>
             <code>
                 'top' + <span>'margin-top'</span> + <span>'border-top-width'</span> + <span>'padding-top'</span> +
@@ -1330,98 +1267,33 @@
                 'bottom' = <span>height of containing block</span>
            </code>
         </p>
-        <p>First set any ''auto'' values for 'margin-top' and 'margin-bottom' to ''0''.</p>
-        <p>If any of 'top' or 'bottom' are ''auto'', set them to ''50%''.</p>
-        <p>If neither 'top' nor 'bottom' are set to a percentage:</p>
-        <ul>
-            <li>If 'height' is ''auto'', 'height' is determined using the equation above.</li>
-            <li>
-                Otherwise, the values are over-constrained. Ignore the value for 'bottom'. Then 
-                solve for 'bottom'.
-            </li>
-        </ul>
-        <p>Otherwise, if both 'top' and 'bottom' are set to a percentage:</p>
-        <ul>
-            <li>
-                If 'height' is ''auto'', then the height is shrink-to-fit. If this results in an 
-                outer height taller than the containing block height, then set the height so that the 
-                outer height is the containing block height.
-            </li>
-            <li>
-                Set 'top' and 'bottom' as follows:
-                <p>
-                    <code>
-                        computed value of 'top' = 'top' percentage * height of containing block - 
-                        'top' percentage * (<span>'margin-top'</span> + <span>'border-top-width'</span> 
-                        + <span>'padding-top'</span> + 'height' + <span>'padding-bottom'</span> + 
-                        <span>'border-bottom-width'</span> + <span>'margin-bottom'</span>)
-                    </code>
-                </p>
-                <p>
-                    <code>
-                        computed value of 'bottom' = height of containing block - computed value of 'top' 
-                        - <span>'margin-top'</span> - <span>'border-top-width'</span> - 
-                        <span>'padding-top'</span> - 'height' - <span>'padding-bottom'</span> - 
-                        <span>'border-bottom-width'</span> - <span>'margin-bottom'</span>
-                    </code>
-                </p>
-            </li>
-        </ul>
-        <p>Otherwise, if 'top' is set to a percentage and 'bottom' is a length:</p>
-        <ul>
-            <li>
-                If 'height' is not ''auto'', the values are over constrained. Ignore 'top' and use 
-                the equality at the beginning of this section to derive the computed value for 'height'.
-            </li>
-            <li>
-                Otherwise, 'height' is ''auto''. Derive 'top' and 'height' under the following constraints:
-                <p>
-                    <code>
-                        computed value of 'top' = 'top' percentage * height of containing block - 
-                        'top' percentage * (<span>'margin-top'</span> + <span>'border-top-width'</span> 
-                        + <span>'padding-top'</span> + 'height' + <span>'padding-bottom'</span> + 
-                        <span>'border-bottom-width'</span> + <span>'margin-bottom'</span>)
-                    </code>
-                </p>
-                <p>
-                    <code>
-                        'top' + (<span>'margin-top'</span> + <span>'border-top-width'</span> + 
-                        <span>'padding-top'</span> + 'height' + <span>'padding-bottom'</span> + 
-                        <span>'border-bottom-width'</span> + <span>'margin-bottom'</span>) + 'right' = 
-                        height of containing block
-                    </code>
-                </p>
-            </li>
-        </ul>
-        <p>otherwise, 'bottom' is a percentage and 'top' is a length:</p>
-        <ul>
-            <li>
-                If 'height' is not ''auto'', the values are over constrained. Ignore 'bottom' and 
-                use the equality at the beginning of this section to derive the computed value for 'height'.
-            </li>
-            <li>
-                Otherwise, 'height' is ''auto''. Derive 'bottom' and 'height' under the following constraints:
-                <p>
-                    <code>
-                        computed value of 'bottom' = 'bottom' percentage * height of containing block - 
-                        'bottom' percentage * (<span>'margin-top'</span> + <span>'border-top-width'</span> 
-                        + <span>'padding-top'</span> + 'height' + <span>'padding-bottom'</span> + 
-                        <span>'border-bottom-width'</span> + <span>'margin-bottom'</span>)
-                    </code>
-                </p>
-                <p>
-                    <code>
-                        'top' + (<span>'margin-top'</span> + <span>'border-top-width'</span> + 
-                        <span>'padding-top'</span> + 'height' + <span>'padding-bottom'</span> + 
-                        <span>'border-bottom-width'</span> + <span>'margin-bottom'</span>) + 'bottom' = 
-                        height of containing block
-                    </code>
-                </p>
-            </li>
-        </ul>
+        <p>
+            If 'height' is not ''auto'' and 'margin-top' + 'border-top-width' + 'padding-top' + 
+            'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' (plus any of 'top' or 
+            'bottom' that are not ''auto'') is larger than the height of the <span>containing block</span>, then 
+            any ''auto'' values for 'top' or 'bottom' are, for the following rules, treated as zero.
+        </p>
+        <p>
+            If all of the above have a computed value other than ''auto'', the values are said to be 
+            "over-constrained" and one of the used values will have to be different from its 
+            computed value. Ignore the specified value of 'bottom' and the value is calculated so as 
+            to make the equality true.
+        </p>
+        <p>
+            If there is exactly one value specified as ''auto'', its used value follows from the 
+            equality.
+        </p>
+        <p>
+            If 'height' is set to ''auto'', any other ''auto'' values become ''0'' and 'height' 
+            follows from the resulting equality.
+        </p>
+        <p>
+            If both 'top' and 'bottom' are ''auto'', their used values are equal. This vertically 
+            centers the element with respect to the edges of the <span>containing block</span>.
+        </p>
         <!-- End section: The height of a 'center' positioned, non-replaced element -->
 
-        <h3 id="height-of-absolute-replaced-elements">The height of absolute, page or fixed positioned, replaced element</h3>
+        <h3 id="height-of-absolute-replaced-elements">The height of absolute, page or fixed positioned, replaced elements</h3>
         <p>
             If 'height' and 'width' both have computed values of ''auto'' and the element also has an 
             intrinsic height, then that intrinsic height is the used value of 'height'.
@@ -1463,8 +1335,15 @@
         </ol>
         <!-- End section: The height of absolute, page or fixed positioned, replaced element -->
 
-        <h3 id="height-of-center-replaced-elements">The height of a center positioned, replaced element</h3>
-        <p class="issue">Need to come up with a definition for replaced elements</p>
+        <h3 id="height-of-center-replaced-elements">The height of a center positioned, replaced elements</h3>
+        <p>
+            The used value for 'height' is determined as for "<a href="#height-of-absolute-replaced-elements">The height of absolute, page or fixed 
+            positioned, replaced elements</a>".
+        </p>
+        <p>
+            Then the rules for "<a href="#height-of-center-non-replaced-elements">The height of a center positioned, non-replaced elements</a>" are 
+            applied to determine the centering.
+        </p>
         <!-- End section: The height of a center positioned, replaced element -->
 
         <h3 id="auto-height-for-block-formatting-context-roots">'Auto' heights for block formatting context roots</h3>
@@ -1557,7 +1436,7 @@
         </p>
         <div class="example">
 <pre><code class="html">
-&lt;!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN"&gt;
+&lt;!DOCTYPE html&gt;
 &lt;html&gt;
     &lt;head&gt;
         &lt;title&gt;Comparison of positioning schemes&lt;/title&gt;
@@ -1610,8 +1489,8 @@
         </p>
         <div class="figure">
             <p>
-                <img src="flow-generic.png" alt="Image illustrating the normal flow of text between parent and sibling boxes.">
-                <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-flow-generic" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-generic-desc.html" title="Long description for normal flow example">[D]</a></span>
+                <img src="images/flow-generic.png" alt="Image illustrating the normal flow of text between parent and sibling boxes.">
+                <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-flow-generic" href="images/longdesc/flow-generic-desc.html" title="Long description for normal flow example">[D]</a></span>
             </p>
         </div>
         <!-- End section: Normal flow -->
@@ -1642,8 +1521,8 @@
             </p>
             <div class="figure">
                 <p>
-                    <img src="flow-relative.png" alt="Image illustrating the effects of relative positioning on a box's content.">
-                    <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-flow-relative" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-relative-desc.html" title="Long description for relative positioning example">[D]</a></span>
+                    <img src="images/flow-relative.png" alt="Image illustrating the effects of relative positioning on a box's content.">
+                    <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-flow-relative" href="images/longdesc/flow-relative-desc.html" title="Long description for relative positioning example">[D]</a></span>
                 </p>
             </div>
             <p class="note">
@@ -1671,8 +1550,8 @@
         </p>
         <div class="figure">
             <p>
-                <img src="flow-float.png" alt="Image illustrating the effects of floating a box.">
-                <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-flow-float" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-float-desc.html" title="Long description of example illustrating floating">[D]</a></span>
+                <img src="images/flow-float.png" alt="Image illustrating the effects of floating a box.">
+                <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-flow-float" href="images/longdesc/flow-float-desc.html" title="Long description of example illustrating floating">[D]</a></span>
             </p>
         </div>
         <p>
@@ -1681,7 +1560,7 @@
         </p>
         <div class="example">
 <pre><code class="html">
-&lt;!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN"&gt;
+&lt;!DOCTYPE html&gt;
 &lt;html&gt;
     &lt;head&gt;
         &lt;title&gt;Comparison of positioning schemes II&lt;/title&gt;
@@ -1710,8 +1589,8 @@
         </div>
         <div class="figure">
             <p>
-                <img src="flow-clear.png" alt="Image illustrating the effects of floating a box without setting the clear property to control the flow of text around the box.">
-                <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-flow-clear" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-clear-desc.html" title="Long description of example illustrating floating without clear">[D]</a></span>
+                <img src="images/flow-clear.png" alt="Image illustrating the effects of floating a box without setting the clear property to control the flow of text around the box.">
+                <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-flow-clear" href="images/longdesc/flow-clear-desc.html" title="Long description of example illustrating floating without clear">[D]</a></span>
             </p>
         </div>
         <p>
@@ -1728,8 +1607,8 @@
         </div>
         <div class="figure">
             <p>
-                <img src="flow-clear2.png" alt="Image illustrating the effects of floating an element with setting the clear property to control the flow of text around the element.">
-                <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-flow-clear2" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-clear2-desc.html" title="Long description of example illustrating floating with clear">[D]</a></span>
+                <img src="images/flow-clear2.png" alt="Image illustrating the effects of floating an element with setting the clear property to control the flow of text around the element.">
+                <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-flow-clear2" href="images/longdesc/flow-clear2-desc.html" title="Long description of example illustrating floating with clear">[D]</a></span>
             </p>
         </div>
         <!-- End section: floating a box -->
@@ -1760,8 +1639,8 @@
         </p>
         <div class="figure">
             <p>
-                <img src="flow-absolute.png" alt="Image illustrating the effects of absolutely positioning a box.">
-                <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-flow-absolute" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-absolute-desc.html" title="Long description for example illustrating absolute positioning">[D]</a></span>
+                <img src="images/flow-absolute.png" alt="Image illustrating the effects of absolutely positioning a box.">
+                <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-flow-absolute" href="images/longdesc/flow-absolute-desc.html" title="Long description for example illustrating absolute positioning">[D]</a></span>
             </p>
         </div>
         <p>
@@ -1789,8 +1668,8 @@
         <p>This results in something like the following:</p>
         <div class="figure">
             <p>
-                <img src="flow-abs-rel.png" alt="Image illustrating the effects of absolutely positioning a box with respect to a containing block.">
-                <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-flow-abs-rel" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-abs-rel-desc.html" title="Long description for example illustrating positioning with respect to a positioned ancestor">[D]</a></span>
+                <img src="images/flow-abs-rel.png" alt="Image illustrating the effects of absolutely positioning a box with respect to a containing block.">
+                <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-flow-abs-rel" href="images/longdesc/flow-abs-rel-desc.html" title="Long description for example illustrating positioning with respect to a positioned ancestor">[D]</a></span>
             </p>
         </div>
         <p>If we do not position the <em>outer</em> box:</p>
@@ -1812,8 +1691,8 @@
         </p>
         <div class="figure">
             <p>
-                <img src="flow-static.png" alt="Image illustrating the effects of absolutely positioning a box with respect to a containing block established by a normally positioned parent.">
-                <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-flow-static" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-static-desc.html" title="Long description illustrating absolute positioning with respect to the initial containing block">[D]</a></span>
+                <img src="images/flow-static.png" alt="Image illustrating the effects of absolutely positioning a box with respect to a containing block established by a normally positioned parent.">
+                <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-flow-static" href="images/longdesc/flow-static-desc.html" title="Long description illustrating absolute positioning with respect to the initial containing block">[D]</a></span>
             </p>
         </div>
         <p>
@@ -1832,7 +1711,7 @@
         <p>might result in something like:</p>
         <div class="figure">
             <p>
-                <img src="changebar.png" alt="Image illustrating the use of floats to create a changebar effect.">
+                <img src="images/changebar.png" alt="Image illustrating the use of floats to create a changebar effect.">
                 <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-changebar" href="http://www.w3.org/TR/CSS2/images/longdesc/changebar-desc.html" title="Long description for change bar example">[D]</a></span>
             </p>
         </div>
@@ -1872,7 +1751,7 @@
         </p>
         <div class="figure">
             <p>
-                <img src="flow-absolute.png" alt="Image illustrating the effects of absolutely positioning a box.">
+                <img src="images/flow-absolute.png" alt="Image illustrating the effects of absolutely positioning a box.">
                 <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-flow-absolute2" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-absolute-desc.html" title="Long description for example illustrating absolute positioning">[D]</a></span>
             </p>
         </div>
@@ -1902,7 +1781,7 @@
         <p>This results in something like the following:</p>
         <div class="figure">
             <p>
-                <img src="flow-static.png" alt="Image illustrating the effects of page positioning a box with respect to the initial containing block.">
+                <img src="images/flow-static.png" alt="Image illustrating the effects of page positioning a box with respect to the initial containing block.">
                 <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-flow-static2" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-static-desc.html" title="Long description illustrating page positioning with respect to the initial containing block.">[D]</a></span>
             </p>
         </div>
@@ -1924,7 +1803,7 @@
         </p>
         <div class="figure">
             <p>
-                <img src="flow-static.png" alt="Image illustrating the effects of page positioning a box with respect to the initial containing block.">
+                <img src="images/flow-static.png" alt="Image illustrating the effects of page positioning a box with respect to the initial containing block.">
                 <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-flow-static3" href="http://www.w3.org/TR/CSS2/images/longdesc/flow-static-desc.html" title="Long description illustrating page positioning with respect to the initial containing block.">[D]</a></span>
             </p>
         </div>
@@ -2027,8 +1906,8 @@
                         </p>
                         <div class="figure">
                             <p>
-                                <img alt="diagram of rect() vs inset-rect()" src="clip.png">
-                                <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-clip" href="http://www.w3.org/TR/CSS2/images/longdesc/rect-inset-rect-desc.html" title="Long description illustrating the differences between the rect() and inset() values.">[D]</a></span>
+                                <img src="images/clip.png" alt="diagram of rect() vs inset()">
+                                <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-clip" href="longdesc/rect-inset-desc.html" title="Long description illustrating the differences between the rect() and inset() values.">[D]</a></span>
                             </p>
                             <p class="caption">Diagram of the rectangles defined by ''rect()'' and ''inset()''.</p>
                         </div>
@@ -2062,7 +1941,7 @@
                 clipping regions delimited by the dashed lines in the following illustrations:
             </p>
             <div class="figure">
-                <p><img src="clip_002.png" alt="Two clipping regions">
+                <p><img src="images/clip_002.png" alt="Two clipping regions">
                 <span class="dlink">&nbsp;&nbsp;&nbsp;<a id="img-clip_002" href="http://www.w3.org/TR/CSS2/images/longdesc/clip-desc.html" title="Long description for example of clipping region">[D]</a></span></p>
             </div>
             <p>The following rule:</p>
@@ -2074,7 +1953,7 @@
                 following illustration:
             </p>
             <div class="figure">
-                <p><img alt="A clipping region" src="clip2.png">
+                <p><img src="images/clip2.png" alt="A clipping region">
                     <span class="dlink"><a id="img-clip2" href="http://www.w3.org/TR/CSS2/images/longdesc/clip-desc.html" title="Long description for example of clipping region">[D]</a></span>
                 </p>
                 <p class="caption">An image of 50 by 55 pixels is clipped with a clipping mask of 35 by 40 pixels.</p>
@@ -2181,7 +2060,7 @@
         </p>
         <div class="example">
 <pre><code class="html">
-&lt;!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN"&gt;
+&lt;!DOCTYPE html&gt;
 &lt;html&gt;
     &lt;head&gt;
         &lt;title&gt;Z-order positioning&lt;/title&gt;
@@ -2207,7 +2086,7 @@
         &lt;div id="text2"&gt;
             This text will be beneath everything.
         &lt;/div&gt;
-        &lt;div id="text3" class="pile" 
+        &lt;div id="text3" class="pile"
                 style="z-index: 2"&gt;
             This text will underlay text1, but overlay the butterfly image
         &lt;/div&gt;
@@ -2249,7 +2128,7 @@
             nearest to the user:
         </p>
         <div class="figure">
-            <p><img alt="A stacking context with four layers" src="stack.png"></p>
+            <p><img src="images/stack.png" alt="A stacking context with four layers"></p>
             <p class="caption">Schematic diagram of a stacking context with four layers.</p>
         </div>
         <p>

--- flow-clear2.png DELETED ---

--- clip_002.png DELETED ---

--- flow-abs-rel.png DELETED ---

--- flow-static.png DELETED ---
Received on Saturday, 29 October 2011 00:11:36 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Saturday, 29 October 2011 00:11:37 GMT