title: Text in div element is raised above horizontally aligned span element in Firefox
body: <p>I'm writing a web application, where support tickets are shown with the ticket ID on the left as static text, and the remaining fields (description, severity, duration, status, reporter) are shown on the right as scrolling text in a fixed size viewport.</p>
  
  <p>I started with a <code>&lt;span&gt;</code> containing the ticket ID, and a viewport <code>&lt;div&gt;</code> containing a second <code>&lt;span&gt;</code> with the remaining fields, and an animated <code>left</code> property (represented by <code>#attempt1</code> in the example).  This works fine in Chrome and Safari, but the scrolling text is raised above the static text in Firefox (I can't use Internet Explorer, because it doesn't support web sockets; I haven't tried Opera yet).</p>
  
  <p>I tried replacing the viewport <code>&lt;div&gt;</code> with another <code>&lt;span&gt;</code> (represented by <code>#attempt2</code>) but then the text is overlapped, because the <code>overflow:hidden</code> style is ignored.  Just to see what happened, I also added the <code>display:inline-block</code> style to the replacement <code>&lt;span&gt;</code> (represented by <code>#attempt3</code>) and it behaves like the original <code>&lt;div&gt;</code>.</p>
  
  <p>I've created a cut-down example showing this behaviour, where the scrolling text elements have a hard-coded <code>left</code> property; please see this jsfiddle <a href="http://jsfiddle.net/uLAm6/" rel="nofollow noreferrer">http://jsfiddle.net/uLAm6/</a>.</p>
  
  <p><img src="https://i.stack.imgur.com/jnETj.png" alt="First attempt, with scrolling text raised above static text"></p>
  
  <p><img src="https://i.stack.imgur.com/QFs0b.png" alt="Second attempt, with scrolling text overlapping static text"></p>
  
  <p>Can anyone (i) explain why Firefox is showing the raised text, and (ii) suggest a way to make any of the attempts in my example work like they do in Chrome?  Many thanks!</p>