title: CSS: Position absolute with XHTML Transitional Doctype
body: <p>I am trying to position a <code>&lt;span&gt;</code> relative to a particular image. I must use the XHTML Transitional doctype because that is what the application has been using since years before I ever laid hands on it and too much depends on it.</p>
  
  <p>The following code correctly positions the <code>&lt;span&gt;</code> way off to the side:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              span.tooltip {
                  z-index:1000;
  
                  position:absolute;
                  top:200;
                  left:600;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;span class="hasTooltip"&gt;
              &lt;img src="https://www.google.com/images/srpr/logo3w.png" /&gt;
              &lt;span class="tooltip"&gt;Tooltip!&lt;/span&gt;
          &lt;/span&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>However, this code breaks the <code>&lt;span&gt;</code> position, and it always appears in the same spot no matter what the <code>left</code> or <code>top</code> values are:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              span.tooltip {
                  z-index:1000;
  
                  position:absolute;
                  top:200;
                  left:600;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;span class="hasTooltip"&gt;
              &lt;img src="https://www.google.com/images/srpr/logo3w.png" /&gt;
              &lt;span class="tooltip"&gt;Tooltip!&lt;/span&gt;
          &lt;/span&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How can I correctly position this <code>&lt;span&gt;</code> element with the XHTML Transitional doctype?</p>