Question

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.

I started with a <span> containing the ticket ID, and a viewport <div> containing a second <span> with the remaining fields, and an animated left property (represented by #attempt1 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).

I tried replacing the viewport <div> with another <span> (represented by #attempt2) but then the text is overlapped, because the overflow:hidden style is ignored. Just to see what happened, I also added the display:inline-block style to the replacement <span> (represented by #attempt3) and it behaves like the original <div>.

I’ve created a cut-down example showing this behaviour, where the scrolling text elements have a hard-coded left property; please see this jsfiddle http://jsfiddle.net/uLAm6/.

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!

Answer 1

Every browser render differently that why we RESET this. In your case there 2 or 3 factors which effect elements misalignment. SPAN is an inline element so there default align is baseline for this define vertical-align:top. Write like this:

.static,.viewport
{
    vertical-align:top;
}
body{
    line-height:1;
}

Check this for more http://jsfiddle.net/uLAm6/6/