title: CSS absolute positioning nightmare—browser differences
body: <p>I have some code that will allow me to have a couple of <code>div</code>s pop up with HTML in them.</p>
  
  <p>I got it pixel perfect in Firefox and then realised that all the other browsers (not tested in IE) are off.</p>
  
  <p>Could anyone tell me or show me an article on how different browsers treat absolute positioned elements and how to correct my dilemma?</p>
  
  <p>Here is <a href="http://jsfiddle.net/jamcoupe/kcF9Z/" rel="nofollow noreferrer">my original code</a>, and here is <a href="http://jsfiddle.net/jamcoupe/kcF9Z/5/" rel="nofollow noreferrer">my new code</a>.</p>
  
  <p>This is what I am seeing:</p>
  
  <p><img src="https://i.stack.imgur.com/2Qk0e.png" alt="Photo of differences"></p>