title: Firefox and Chrome give different values for offsetTop
body: <p>I am trying to position an span element (let us call it "the tooltip span") relative to a input field. To do this, I am wrapping the tooltip span and the input field in another span element (let's call it "the wrapper span") that has <code>position: relative</code>. Then I set <code>position: absolute</code> on tooltip span. This makes the tooltip span position itself relative to the wrapper span but not being part of the page flow - not taking up any space. This is exactly what I want.</p>
  
  <p>Then, using javascript, I set the position of the tooltip relative to the position of the input element. Since the input element can be shaped differently on different pages (script should be globablly applicable), I am using its <code>offsetTop</code> and <code>offsetLeft</code> properties to calculate its position relative to the wrapper span.</p>
  
  <p>However, I am noticing inconsistencies between browsers here. In Firefox, IE6, 7, 8, it works as expected. But in Chrome and Safari the reported <code>offsetTop</code> seems, well, incorrect.</p>
  
  <p>To prove this, I created the test page below:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  span { font-size: 8px; position: relative; top: 0; left: 0; border: 1px solid red } 
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;span id="wrapper"&gt;
  &lt;input id="foo" name="foo" type="text"&gt;
  &lt;/span&gt;
  
  &lt;script type="text/javascript"&gt;
  document.write("&lt;br&gt;Offset parent: " + document.getElementById("foo").offsetParent.id);
  document.write("&lt;br&gt;Offset top: " + document.getElementById("foo").offsetTop);
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and loaded it in Firefox and Chrome. Both browser report the wrapper span as its <code>offsetParent</code>, but for Firefox the <code>offsetTop</code> is -8 and for Chrome it is 2. Visually the page renders the same in both browsers.</p>
  
  <p>This gives me a headache, because I cannot just hack in a different offset that I always apply when someone is using Chrome, because if I change the font size, the <code>offsetTop</code> will not change, and my script will break.</p>
  
  <p>Is this a bug? Can I solve this differently?</p>