title: IE problems: HTML tooltips on hover, requires a doctype
body: <p>I have some simple CSS/HTML for a very basic tooltip:</p>
  
  <pre><code>    &lt;style type="text/css"&gt;
      .tooltip {
          text-decoration: none;
          position: relative;
      }
      .tooltip span {
          margin-left: -999em;
          position: absolute;
      }
      .tooltip:hover span {
          border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
          box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
          position: absolute; left: 1em; top: 2em; z-index: 99;
          margin-left: 0; width: 250px;
      }
      .custom { padding: 0.4em 0.4em 0.4em 0.8em; }
      .info { background: #D5F1FF; border: 3px solid #2BB0D7; }
      &lt;/style&gt;
  
  &lt;span class="tooltip"&gt;Thing which can be hovered on&lt;/a&gt;
  &lt;span class="custom info"&gt;
  Text in tooltip goes here...
  &lt;/span&gt;&lt;/span&gt;
  </code></pre>
  
  <p>Which works all fine for Firefox and Chrome, obviously, but when I try it with Internet Explorer, the tooltip just doesn't load/work...</p>
  
  <p>HOWEVER, when I put a doctype at the top e.g:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd"&gt;
  </code></pre>
  
  <p>It works fine in Internet Explorer, but all my other layout's seem to break, i've never used a doctype, for the reasons of never needing one. Layouts been fine in all three browsers until this.</p>
  
  <p>Is there something in the CSS which can be changed so the tooltip will work in Internet Explorer (without a doctype) or a similar tooltip CSS method? -Pref not javascript.</p>
  
  <p>Hope i've explained my problem sufficiently, thanks.</p>