Redid list-style-position example to be text-based. No good reason to bring in an image when I do all the other list examples in text.

Author: tabatkins

css3-lists/Overview.html

@@ -26,12 +26,12 @@
 
    <h1>CSS Lists and Counters Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 22 July 2011</h2>
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 23 July 2011</h2>
 
    <dl>
     <dt>This version:
 
-    <dd><!--<a href="http://www.w3.org/TR/2011/WD-css3-lists-20110722">http://www.w3.org/TR/2011/WD-css3-lists-20110722</a></dd>-->
+    <dd><!--<a href="http://www.w3.org/TR/2011/WD-css3-lists-20110723">http://www.w3.org/TR/2011/WD-css3-lists-20110723</a></dd>-->
      <a
      href="http://dev.w3.org/csswg/css3-lists/">http://dev.w3.org/csswg/css3-lists/</a>
 
@@ -690,18 +690,19 @@ <h2 id=list-style-position-property><span class=secno>4. </span> Marker
  &lt;head>
   &lt;title>Comparison of inside/outside position&lt;/title>
   &lt;style>
-   ul         { list-style: outside; }
    ul.compact { list-style: inside; }
+   ul         { list-style: outside; }
   &lt;/style>
  &lt;/head>
  &lt;body>
-  &lt;ul>
-   &lt;li>first list item comes first&lt;/li>
-   &lt;li>second list item comes second&lt;/li>
-  &lt;/ul>
   &lt;ul class=compact>
-   &lt;li>first list item comes first&lt;/li>
-   &lt;li>second list item comes second&lt;/li>
+   &lt;li>first "inside" list item comes first&lt;/li>
+   &lt;li>second "inside" list item comes first&lt;/li>
+  &lt;/ul>
+  &lt;hr>
+  &lt;ul>
+   &lt;li>first "outside" list item comes first&lt;/li>
+   &lt;li>second "outside" list item comes first&lt;/li>
   &lt;/ul>
  &lt;/body>
 &lt;/html>
@@ -710,12 +711,19 @@ <h2 id=list-style-position-property><span class=secno>4. </span> Marker
    <p>The above example may be formatted as:</p>
 
    <div class=figure>
-    <p><img alt="list with bullets to the left of it and list with bullets
-     inside" id=img-list-inout src=list-inout.gif></p>
+    <pre>
+  * first "inside" list
+  item comes first
+  * second "inside" list
+  item comes second
+
+========================
+
+* first "outside" list
+  item comes first
+* second "outside" list
+  item comes second</pre>
    </div>
-
-   <p>In right-to-left text, the markers would have been on the right side of
-    the box.</p>
   </div>
   <!-- ====================================================================== -->
 

css3-lists/Overview.src.html

@@ -348,18 +348,19 @@ <h2 id='list-style-position-property'>
  &lt;head>
   &lt;title>Comparison of inside/outside position&lt;/title>
   &lt;style>
-   ul         { list-style: outside; }
    ul.compact { list-style: inside; }
+   ul         { list-style: outside; }
   &lt;/style>
  &lt;/head>
  &lt;body>
-  &lt;ul>
-   &lt;li>first list item comes first&lt;/li>
-   &lt;li>second list item comes second&lt;/li>
-  &lt;/ul>
   &lt;ul class=compact>
-   &lt;li>first list item comes first&lt;/li>
-   &lt;li>second list item comes second&lt;/li>
+   &lt;li>first "inside" list item comes first&lt;/li>
+   &lt;li>second "inside" list item comes first&lt;/li>
+  &lt;/ul>
+  &lt;hr>
+  &lt;ul>
+   &lt;li>first "outside" list item comes first&lt;/li>
+   &lt;li>second "outside" list item comes first&lt;/li>
   &lt;/ul>
  &lt;/body>
 &lt;/html>
@@ -368,10 +369,19 @@ <h2 id='list-style-position-property'>
 		<p>The above example may be formatted as:</p>
 
 		<div class="figure">
-			<p><img id="img-list-inout" src="list-inout.gif" alt="list with bullets to the left of it and list with bullets inside"></p>
+			<pre>
+  * first "inside" list
+  item comes first
+  * second "inside" list
+  item comes second
+
+========================
+
+* first "outside" list
+  item comes first
+* second "outside" list
+  item comes second</pre>
 		</div>
-
-		<p>In right-to-left text, the markers would have been on the right side of the box.</p>
 	</div>
 
 <!-- ====================================================================== -->