firefox bug? div can not handle 2000 lines of text using overflow

[robin]

Hi all,

Recently I found firefox (2.0) is not able to display below html correctly:
<code>
<div style="overflow-x:scroll">
line1<br/>
line2<br/>
...
line2000<br/>
</div>
</code>
There are 2000 lines of text inside the div tag, and firefox only displays up to 1920 (approximately) lines. However, if I remove the overflow style, all 2000 lines can be displayed.

Is this a known issue? Any workarounds?

Thanks for your help.
Robin

[DrDoc]

Welcome to WebmasterWorld!

overflow-x

is invalid CSS, which is why you probably see the strange behavior.

[edited by: DrDoc at 4:07 pm (utc) on July 24, 2008]

[D_Blackwell]

To follow-up: You can use the overflow: property. Then use the value 'scroll'. You will also need a means of assigning a height to the <div> or there will be no need for overflow: scroll; - except that FF may choke on the code, cutting it off as described, which makes overflow: scroll not optional, but a necessary workaround for FF.

[Xapti]

overflow-x (and overflow-y) is a valid CSS 3 property; It was also implemented in IE since v5 or v6, and other browsers a bit later.
Why would you use overflow-x, if you have multiple lines of TEXT, And want it to scroll VERTICALLY?
In maths class you learn X axis is horizontal, Y axis is vertical.

Secondly, why use overflow:scroll, when you can just use overflow:auto? Scroll just forces the scrollbar to be there even if there isn't enough content to fill up the container, and it will be grayed out/disabled (so it's not very useful).

Make sure you have a valid doctype set on your page.
Check the page with the W3C validator (HTML and CSS)
Make sure you assigned a height to your container.

[robin]

The document is valid and the result is the same using overflow-x:auto. I also posted this question to firefox forum and they told me that this is a firefox bug.

Specifying height property of the container div and make it vertically scrollable is a workaround, however it has the drawback that by specifying a fix height, it does not occupy all vertical area of the browser (I've tried to specify height:100% hoping it works the same way like width:100%, but clearly it does not). I plan to write some javascript to adjust height based on viewport size of the browser so that height of the div matches with viewport height automatically).

Anyway, thanks for all your help and I get the idea now.

Regards.
Robin

[DrDoc]

When specifying

height: 100%

, did you first also set the height of

body

to 100%?

What is your doctype?

[edited by: DrDoc at 9:53 am (utc) on July 27, 2008]