title: CSS span/div width different in firefox and chrome
body: <p>Trying to get a gap in a line of text, like this:</p>
  
  <pre><code>Text: (absolute positioned field here) more text
  </code></pre>
  
  <p>In Chrome, it pushes it over just the right amount, so "more text" is just right of the field. In Firefox, it displays it too far to the left, so that the text is hidden behind the field.</p>
  
  <p>I have an absolute-positioned field in between. "more text" is in a span, and I've tried positioning it using different units of measurement, as well as by using width, margin-left, and position:relative. The units of measurement just seem to be less in Firefox. This is basically what I have:</p>
  
  <pre><code>&lt;div&gt; Text &lt;input /&gt;&lt;span class="moveright"&gt; more text &lt;/span&gt; &lt;/div&gt;
  .moveright {display: inline-block; position:relative; left:160px}
  </code></pre>
  
  <p>Thanks for the help!</p>
  
  <p><strong>edit: jsFiddle:</strong> <a href="http://jsfiddle.net/7jmP4/" rel="nofollow">http://jsfiddle.net/7jmP4/</a></p>
  
  <p>In the fiddle I intentionally space it wrong to produce what I'm seeing. And if I view it in Chrome and Firefox it perfectly produces the problem that I have - in Firefox, "more text" is mashing into the text field on the top one.</p>