changed informative notifications for code samples from CSS content to native dom content
authorMark Sadecki <mark@w3.org>
Sun, 08 Jun 2014 17:25:09 -0400
changeset 91 5342031cd82a
parent 90 16b132930901
child 92 8bf116468476
changed informative notifications for code samples from CSS content to native dom content
longdesc1/longdesc.html
--- a/longdesc1/longdesc.html	Fri Jun 06 16:41:30 2014 -0400
+++ b/longdesc1/longdesc.html	Sun Jun 08 17:25:09 2014 -0400
@@ -6,14 +6,14 @@
     <style type="text/css">
       .issue {border: dashed red 2px; background-color: #ffd}
       .example {color: #404; background-color:#eee}
-      .example::before {float:left;
-        margin-top: -.2em;
+
+      span.informative {
         background-color: white;
-            display: block;
-            border: 1px solid black;
-            color: #404;
-            padding: 2px;
-        content: "Example: (Informative)"}
+        display: inline;
+        border: 1px solid black;
+        color: #404;
+        padding: 2px;
+      }
 
       .example:first-child {padding-top:1em}
 
@@ -445,7 +445,10 @@
         element that enabled a machine-discoverable description of an image to
         be linked to the image. This extension specification defines a <code>longdesc</code>
         attribute to provide that functionality for HTML5.</p>
-      <pre class="example"><code class="language-markup">
+      <div class="example" role="region" aria-label="example">
+        <pre>
+<span class="informative">Example: (Informative)</span>
+<code class="language-markup">
 
 &lt;!-- The description is somewhere on the same page as the image --&gt;
 &lt;img src="http://example.com/graph1" alt="Drinks are getting sweeter"
@@ -463,6 +466,7 @@
 %3Cbody%3E%3Cp%3EA%20blue%20capital%20letter%20%22W%22%20with%20kerning%20so%20it%20
 touches%20a%20blue%203%2C%20followed%20by%20a%20black%20shadow%20of%20a%20white%20
 capital%20letter%20C%20all%20on%20a%20white%20background%3C/body%3E%3C/html%3E"&gt;</code></pre>
+</div>
     </section>
     <section id="conformance">
       <h2><span class="secno">1. </span>Conformance</h2>
@@ -709,7 +713,8 @@
               class="externalDFN"
               data-spec="HTML5">HTMLImageElement</a></code>
           Interface</h3>
-        <pre class="idl"><span class="idlInterface" id="idl-def-Element">partial interface <span
+        <pre class="idl">
+<span class="idlInterface" id="idl-def-Element">partial interface <span
 class="idlInterfaceID">HTMLImageElement</span> {
 <span class="idlAttribute">             attribute <span class="idlAttrType"><a>DOMString</a></span> <span
 class="idlAttrName"><a
@@ -751,13 +756,22 @@
               </dl>
             </dd>
           </dl>
-          <pre class="example"><code class="language-javascript">/*Make the first internal longdesc reference absolute*/
+            <div class="example" role="region" aria-label="example">
+              <pre class="example">
+<span class="informative">Example: (Informative)</span>
+
+<code class="language-javascript">/*Make the first internal longdesc reference absolute*/
 
 var baseURL = document.location.origin + document.location.pathname
 var someImage = document.querySelector('img[longdesc^=#]');
 
 someImage.longdesc = baseURL + someImage.longdesc;</code></pre>
-          <pre class="example"><code class="language-javascript">/*Open new windows for each longdesc found*/
+            </div>
+            <div class="example" role="region" aria-label="example">
+              <pre class="example">
+<span class="informative">Example: (Informative)</span>
+
+<code class="language-javascript">/*Open new windows for each longdesc found*/
 
 var describedImages = document.querySelectorAll('img[longdesc]');
 
@@ -765,7 +779,12 @@
   if (i.longdesc)
     window.open(i.longdesc);
 }</code></pre>
-          <pre class="example"><code class="language-javascript">/*Tries to repair errors where the longdesc isn't a URI*/
+            </div>
+            <div class="example" role="region" aria-label="example">
+              <pre class="example">
+<span class="informative">Example: (Informative)</span>
+
+<code class="language-javascript">/*Tries to repair errors where the longdesc isn't a URI*/
 
 var describedImages = document.querySelectorAll('img[longdesc]');
 
@@ -777,6 +796,7 @@
     i.longdesc += theData;
   }
 }</code></pre>
+</div>
         </section>
       </section>
       <section class="appendix" id="acknowledgements" aria-label="informative">