Adding missing image

Correct grammar and spelling mistakes
Added source for example

Author: Arron Eicholz

css3-positioning/Overview.html

@@ -621,7 +621,7 @@ <h3 id=def-containing-blocks><span class=secno>3.1. </span>Definition of
 
    <li id=on-a-subsequent-page-or>on a subsequent page, or
 
-   <li id=may-omit-it-alltogether.>may omit it alltogether.
+   <li id=may-omit-it-altogether.>may omit it altogether.
   </ul>
 
   <p class=note id=note-a-block-level-element-that-is-split> Note, a
@@ -1045,13 +1045,13 @@ <h3 id=fixed-positioning><span class=secno>6.4. </span><span
 
   <div class=example>
    <p id=authors-may-use-fixed-positioning-to-cre> Authors may use fixed
-    positioning to create following presentation:</p>
+    positioning to create the following presentation:</p>
 
    <div class=figure>
     <p id=nbspnbspnbspd-> <img alt="Example of frame layout" src=frame.png>
      <span class=dlink>&nbsp;&nbsp;&nbsp;<a
      href="http://www.w3.org/TR/CSS2/images/longdesc/frame-desc.html"
-     id=img-anon-block
+     id=img-frame
      title="Long description for frame layout example">[D]</a></span></p>
    </div>
 
@@ -1111,17 +1111,18 @@ <h3 id=fixed-positioning><span class=secno>6.4. </span><span
   &lt;/body&gt;
 &lt;/html&gt;
 </code></pre>
-  </div>
+   <span class=slink>&nbsp;&nbsp;&nbsp;<a href=frame-src.html id=frame-source
+   title="Source code for frame layout example">[S]</a></span></div>
   <!-- End section: Fixed positioning -->
   <!-- End section: Positioning schemes -->
 
   <h3 id=position-property><span class=secno>6.5. </span>Choosing a
    positioning scheme: &lsquo;<a href="#position"><code
    class=property>position</code></a>&rsquo; property</h3>
 
-  <p id=the-position-property-determine-which-of> The &lsquo;<a
+  <p id=the-position-property-determines-which-o> The &lsquo;<a
    href="#position"><code class=property>position</code></a>&rsquo; property
-   determine which of the positioning algorithms is used to calculate the
+   determines which of the positioning algorithms is used to calculate the
    position of a box.
 
   <table class=propdef id=propdef-position>
@@ -1253,7 +1254,7 @@ <h3 id=position-property><span class=secno>6.5. </span>Choosing a
      rel=biblioentry>[CSS3-REGIONS]<!--{{!CSS3-REGIONS}}--></a>.</p>
 
     <p class=issue id=there-have-been-some-discussions-about-t> There have
-     been some discussions about the naming of the propery value name <a
+     been some discussions about the naming of the property value <a
      href="#page" title="'position'!!''page''">&lsquo;<code
      class=css>page</code>&rsquo;</a>. If you have any suggestions please
      email the mailing list.</p>
@@ -1306,14 +1307,13 @@ <h3 id=position-property><span class=secno>6.5. </span>Choosing a
     and &lsquo;<a href="#left"><code class=property>left</code></a>&rsquo;
     properties. The box is vertically and horizontally centered within its <a
     href="#containing-block0">containing block</a> and these properties
-    specify offsets with respect to the box&#39;s centered position withing
+    specify offsets with respect to the box&#39;s centered position within
     its <a href="#containing-block0">containing block</a>. 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.
-    <div class=issue> Need a better, more clear, defintion for center.</div>
   </dl>
 
   <p id=in-previous-versions-of-css-user-agents-> In previous versions of CSS
@@ -1337,7 +1337,7 @@ <h3 id="position-root">Choosing a different containing block for positioning: 'p
             </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></td>
+                <td><var>auto</var> | <var>parent</var> | <var>container</var> | <var>root</var> | <var>viewport</var> | <var>nth-parent()</var> | <var>element()</var></td>
             </tr>
             <tr>
                 <th>Initial:</th>
@@ -1398,12 +1398,20 @@ <h3 id="position-root">Choosing a different containing block for positioning: 'p
                     'nth-parent()'. Is this really a good concept?
                 </p>
             </dd>
+            <dt><dfn title="'position-reference'!!''element()''">element()</dfn></dt>
+            <dd>
+                
+                <p class="issue">
+                    Inserting and removing elements from the tree may cause odd behavior with 
+                    'element()'. Is this really a good concept?
+                </p>
+            </dd>
         </dl>
         -->
 
   <p class=issue id=ideas-have-been-raised-to-allow-changing> Ideas have been
    raised to allow changing the positioning containing block or allowing
-   positioining and sizing to use different containing blocks.</p>
+   positioning and sizing to use different containing blocks.</p>
   <!-- End section: Choosing a different containing block for positioning: 'position-reference' property -->
 
   <h3 id=box-offsets-trbl><span class=secno>6.6. </span>Box offsets:
@@ -1485,12 +1493,12 @@ <h3 id=box-offsets-trbl><span class=secno>6.6. </span>Box offsets:
    top edge of the box&#39;s <a href="#containing-block0">containing
    block</a>. For relatively positioned boxes, the offset is with respect to
    the top edges of the box itself (i.e., the box is given a position in the
-   <a href="#normal-flow0">normal flow</a>, then offset from that position
-   according to these properties). For page positioned boxes, the offset is
-   with respect to the top edge of the <span>initial containing block</span>
-   itself. For absolutely positioned elements whose containing block is based
-   on a block-level element, these properties are an offset from the padding
-   edge of that element.
+   <a href="#normal-flow0">normal flow</a>, and then offset from that
+   position according to these properties). For page positioned boxes, the
+   offset is with respect to the top edge of the <span>initial containing
+   block</span> itself. For absolutely positioned elements whose containing
+   block is based on a block-level element, these properties are an offset
+   from the padding edge of that element.
 
   <table class=propdef id=propdef-right>
    <tbody>
@@ -2699,8 +2707,7 @@ <h3 id=normal-flow-example><span class=secno>9.1. </span>Normal flow</h3>
   <div class=figure>
    <p id=nbspnbspnbspd-0> <img
     alt="Image illustrating the normal flow of text between parent and sibling boxes."
-    src="http://www.w3.org/TR/CSS2/images/flow-generic.png"> <span
-    class=dlink>&nbsp;&nbsp;&nbsp;<a
+    src=flow-generic.png> <span class=dlink>&nbsp;&nbsp;&nbsp;<a
     href="http://www.w3.org/TR/CSS2/images/longdesc/flow-generic-desc.html"
     id=img-flow-generic
     title="Long description for normal flow example">[D]</a></span></p>
@@ -2741,8 +2748,7 @@ <h3 id=rel-position><span class=secno>9.2. </span>Relative positioning</h3>
   <div class=figure>
    <p id=nbspnbspnbspd-1> <img
     alt="Image illustrating the effects of relative positioning on a box's content."
-    src="http://www.w3.org/TR/CSS2/images/flow-relative.png"> <span
-    class=dlink>&nbsp;&nbsp;&nbsp;<a
+    src=flow-relative.png> <span class=dlink>&nbsp;&nbsp;&nbsp;<a
     href="http://www.w3.org/TR/CSS2/images/longdesc/flow-relative-desc.html"
     id=img-flow-relative
     title="Long description for relative positioning example">[D]</a></span></p>
@@ -2778,8 +2784,7 @@ <h3 id=floating-box><span class=secno>9.3. </span>Floating a box</h3>
   <div class=figure>
    <p id=nbspnbspnbspd-2> <img
     alt="Image illustrating the effects of floating a box."
-    src="http://www.w3.org/TR/CSS2/images/flow-float.png"> <span
-    class=dlink>&nbsp;&nbsp;&nbsp;<a
+    src=flow-float.png> <span class=dlink>&nbsp;&nbsp;&nbsp;<a
     href="http://www.w3.org/TR/CSS2/images/longdesc/flow-float-desc.html"
     id=img-flow-float
     title="Long description of example illustrating floating">[D]</a></span></p>
@@ -2824,8 +2829,7 @@ <h3 id=floating-box><span class=secno>9.3. </span>Floating a box</h3>
   <div class=figure>
    <p id=nbspnbspnbspd-3> <img
     alt="Image illustrating the effects of floating a box without setting the clear property to control the flow of text around the box."
-    src="http://www.w3.org/TR/CSS2/images/flow-clear.png"> <span
-    class=dlink>&nbsp;&nbsp;&nbsp;<a
+    src=flow-clear.png> <span class=dlink>&nbsp;&nbsp;&nbsp;<a
     href="http://www.w3.org/TR/CSS2/images/longdesc/flow-clear-desc.html"
     id=img-flow-clear
     title="Long description of example illustrating floating without clear">[D]</a></span>
@@ -2850,8 +2854,7 @@ <h3 id=floating-box><span class=secno>9.3. </span>Floating a box</h3>
   <div class=figure>
    <p id=nbspnbspnbspd-4> <img
     alt="Image illustrating the effects of floating an element with setting the clear property to control the flow of text around the element."
-    src="http://www.w3.org/TR/CSS2/images/flow-clear2.png"> <span
-    class=dlink>&nbsp;&nbsp;&nbsp;<a
+    src=flow-clear2.png> <span class=dlink>&nbsp;&nbsp;&nbsp;<a
     href="http://www.w3.org/TR/CSS2/images/longdesc/flow-clear2-desc.html"
     id=img-flow-clear2
     title="Long description of example illustrating floating with clear">[D]</a></span>
@@ -2892,8 +2895,7 @@ <h3 id=abs-positioning><span class=secno>9.4. </span>Absolute positioning</h3>
   <div class=figure>
    <p id=nbspnbspnbspd-5> <img
     alt="Image illustrating the effects of absolutely positioning a box."
-    src="http://www.w3.org/TR/CSS2/images/flow-absolute.png"> <span
-    class=dlink>&nbsp;&nbsp;&nbsp;<a
+    src=flow-absolute.png> <span class=dlink>&nbsp;&nbsp;&nbsp;<a
     href="http://www.w3.org/TR/CSS2/images/longdesc/flow-absolute-desc.html"
     id=img-flow-absolute
     title="Long description for example illustrating absolute positioning">[D]</a></span>
@@ -2935,8 +2937,7 @@ <h3 id=abs-positioning><span class=secno>9.4. </span>Absolute positioning</h3>
   <div class=figure>
    <p id=nbspnbspnbspd-6> <img
     alt="Image illustrating the effects of absolutely positioning a box with respect to a containing block."
-    src="http://www.w3.org/TR/CSS2/images/flow-abs-rel.png"> <span
-    class=dlink>&nbsp;&nbsp;&nbsp;<a
+    src=flow-abs-rel.png> <span class=dlink>&nbsp;&nbsp;&nbsp;<a
     href="http://www.w3.org/TR/CSS2/images/longdesc/flow-abs-rel-desc.html"
     id=img-flow-abs-rel
     title="Long description for example illustrating positioning with respect to a positioned ancestor">[D]</a></span>
@@ -2967,8 +2968,7 @@ <h3 id=abs-positioning><span class=secno>9.4. </span>Absolute positioning</h3>
   <div class=figure>
    <p id=nbspnbspnbspd-7> <img
     alt="Image illustrating the effects of absolutely positioning a box with respect to a containing block established by a normally positioned parent."
-    src="http://www.w3.org/TR/CSS2/images/flow-static.png"> <span
-    class=dlink>&nbsp;&nbsp;&nbsp;<a
+    src=flow-static.png> <span class=dlink>&nbsp;&nbsp;&nbsp;<a
     href="http://www.w3.org/TR/CSS2/images/longdesc/flow-static-desc.html"
     id=img-flow-static
     title="Long description illustrating absolute positioning with respect to the initial containing block">[D]</a></span>
@@ -2994,8 +2994,7 @@ <h3 id=abs-positioning><span class=secno>9.4. </span>Absolute positioning</h3>
   <div class=figure>
    <p id=nbspnbspnbspd-8> <img
     alt="Image illustrating the use of floats to create a changebar effect."
-    src="http://www.w3.org/TR/CSS2/images/changebar.png"> <span
-    class=dlink>&nbsp;&nbsp;&nbsp;<a
+    src=changebar.png> <span class=dlink>&nbsp;&nbsp;&nbsp;<a
     href="http://www.w3.org/TR/CSS2/images/longdesc/changebar-desc.html"
     id=img-changebar
     title="Long description for change bar example">[D]</a></span></p>
@@ -3047,10 +3046,9 @@ <h3 id=page-pos><span class=secno>9.5. </span>Page positioning</h3>
   <div class=figure>
    <p id=nbspnbspnbspd-9> <img
     alt="Image illustrating the effects of absolutely positioning a box."
-    src="http://www.w3.org/TR/CSS2/images/flow-absolute.png"> <span
-    class=dlink>&nbsp;&nbsp;&nbsp;<a
+    src=flow-absolute.png> <span class=dlink>&nbsp;&nbsp;&nbsp;<a
     href="http://www.w3.org/TR/CSS2/images/longdesc/flow-absolute-desc.html"
-    id=img-flow-absolute
+    id=img-flow-absolute2
     title="Long description for example illustrating absolute positioning">[D]</a></span>
     </p>
   </div>
@@ -3060,14 +3058,14 @@ <h3 id=page-pos><span class=secno>9.5. </span>Page positioning</h3>
    Although the parent <em>outer box</em> is setting its &lsquo;<a
    href="#position"><code class=property>position</code></a>&rsquo; property
    to <a href="#relative" title="'position'!!''relative''">&lsquo;<code
-   class=css>relative</code>&rsquo;</a> this <em>outer box</em> box does not
+   class=css>relative</code>&rsquo;</a> this <em>outer box</em> does not
    serve as the containing block for page positioned descendants. Since the
    <em>inner</em> box is a page positioned element its <a
    href="#containing-block0">containing block</a> is not the <a
    href="#relative-positioning1" title="relative positioning">relative
-   positioned</a> <em>outer box</em> box, page positioned elements are
-   positioned from the <span>initial containing block</span>, in this case
-   the top and left edges of the illustration itself.
+   positioned</a> <em>outer box</em>, page positioned elements are positioned
+   from the <span>initial containing block</span>, in this case the top and
+   left edges of the illustration itself.
 
   <div class=example>
    <pre><code class=css>
@@ -3090,10 +3088,9 @@ <h3 id=page-pos><span class=secno>9.5. </span>Page positioning</h3>
   <div class=figure>
    <p id=nbspnbspnbspd-10> <img
     alt="Image illustrating the effects of page positioning a box with respect to the initial containing block."
-    src="http://www.w3.org/TR/CSS2/images/flow-static.png"> <span
-    class=dlink>&nbsp;&nbsp;&nbsp;<a
+    src=flow-static.png> <span class=dlink>&nbsp;&nbsp;&nbsp;<a
     href="http://www.w3.org/TR/CSS2/images/longdesc/flow-static-desc.html"
-    id=img-flow-static
+    id=img-flow-static2
     title="Long description illustrating page positioning with respect to the initial containing block.">[D]</a></span>
     </p>
   </div>
@@ -3121,10 +3118,9 @@ <h3 id=page-pos><span class=secno>9.5. </span>Page positioning</h3>
   <div class=figure>
    <p id=nbspnbspnbspd-11> <img
     alt="Image illustrating the effects of page positioning a box with respect to the initial containing block."
-    src="http://www.w3.org/TR/CSS2/images/flow-static.png"> <span
-    class=dlink>&nbsp;&nbsp;&nbsp;<a
+    src=flow-static.png> <span class=dlink>&nbsp;&nbsp;&nbsp;<a
     href="http://www.w3.org/TR/CSS2/images/longdesc/flow-static-desc.html"
-    id=img-flow-static
+    id=img-flow-static3
     title="Long description illustrating page positioning with respect to the initial containing block.">[D]</a></span>
     </p>
   </div>
@@ -3255,10 +3251,9 @@ <h2 id=clip-property><span class=secno>10. </span>Clipping: the &lsquo;<a
 
       <div class=figure>
        <p id=nbspnbspnbspd-12> <img alt="diagram of rect() vs inset-rect()"
-        src="http://www.w3.org/TR/2002/WD-css3-box-20021024/clip.png"> <span
-        class=dlink>&nbsp;&nbsp;&nbsp;<a
+        src=clip.png> <span class=dlink>&nbsp;&nbsp;&nbsp;<a
         href="http://www.w3.org/TR/CSS2/images/longdesc/rect-inset-rect-desc.html"
-        name=img-flow-static
+        id=img-clip
         title="Long description illustrating the differences between the rect() and inset() values.">[D]</a></span>
         </p>
 
@@ -3300,11 +3295,10 @@ <h2 id=clip-property><span class=secno>10. </span>Clipping: the &lsquo;<a
     delimited by the dashed lines in the following illustrations:</p>
 
    <div class=figure>
-    <p id=nbspnbspnbspd><img alt="Two clipping regions"
-     src="http://www.w3.org/TR/CSS2/images/clip.png"> <span
-     class=dlink>&nbsp;&nbsp;&nbsp;<a
+    <p id=nbspnbspnbspd><img alt="Two clipping regions" src="clip_002.png">
+     <span class=dlink>&nbsp;&nbsp;&nbsp;<a
      href="http://www.w3.org/TR/CSS2/images/longdesc/clip-desc.html"
-     name=img-clip
+     id="img-clip_002"
      title="Long description for example of clipping region">[D]</a></span></p>
    </div>
 
@@ -3319,11 +3313,9 @@ <h2 id=clip-property><span class=secno>10. </span>Clipping: the &lsquo;<a
     illustration:</p>
 
    <div class=figure>
-    <p id=d-><img alt="A clipping region"
-     src="http://www.w3.org/TR/2001/WD-css3-box-20010726/clip2.png"> <span
-     class=dlink><a
+    <p id=d-><img alt="A clipping region" src=clip2.png> <span class=dlink><a
      href="http://www.w3.org/TR/CSS2/images/longdesc/clip-desc.html"
-     name=img-clip
+     id=img-clip2
      title="Long description for example of clipping region">[D]</a></span></p>
 
     <p class=caption id=an-image-of-50-by-55-pixels-is-clipped-w>An image of
@@ -3515,7 +3507,7 @@ <h3 id=definitions-stack><span class=secno>12.1. </span>Definitions</h3>
   <dl>
    <dt>Tree Order
 
-   <dd> Preorder depth-first traversal of the <em>rendering</em> tree, in
+   <dd> The preorder depth-first traversal of the <em>rendering</em> tree, in
     logical (not visual) order for bidirectional content, after taking into
     account properties that move boxes around.
 
@@ -3554,10 +3546,10 @@ <h3 id=painting-order><span class=secno>12.2. </span>Painting order</h3>
    href="#viewport0">viewport</a> is anchored with its top left corner at the
    canvas origin.
 
-  <p id=the-painting-order-order-for-the-descend> The painting order order
-   for the descendants of an element generating a stacking context (see the
-   &lsquo;<a href="#z-index"><code class=property>z-index</code></a>&rsquo;
-   property) is:
+  <p id=the-painting-order-for-the-descendants-o> The painting order for the
+   descendants of an element generating a stacking context (see the &lsquo;<a
+   href="#z-index"><code class=property>z-index</code></a>&rsquo; property)
+   is:
 
   <ol>
    <li id=if-the-element-is-a-root-element-backgro>If the element is a root