Why are IE and Firefox returning different overflow dimensions for a div?

Question

I have a div with a fixed size of 100px. scrollWidth and scrollHeight works fine if the text in the div is normal (no word is long enough to fill the one row entirely). However, if there is any text with one word rendering wider than the 100px it will cause a problem.

Let's say the text is like "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890": then Firefox returns the wrong scrollWidth (100 in this case, which is same as the actual width even though the div is overflowing). However, IE is giving the correct scrollWidth (180 in this case).

Please help me get the correct scrollWidth in Firefox. Sorry if my question looks vague.

Answer 1

this works in my 3.5:

<script>
function test()
{
    var obj = document.getElementById('div1');
    alert(obj.scrollWidth);
}
</script>
<div id="div1" style="overflow:auto; height:200px; width:100px; background-color:#cccccc">
ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890
</div>
<button onClick="test();">ClickMe</button>

Answer 2

Make sure that your div has the overflow:hidden or overflow:auto style set. If it's overflow:visible (the default), then FF won't calculate a larger scrollWidth as there's nothing to scroll (the text is all rendered).

The behavior you observed with IE is actually due to a bug in that browser's implementation of overflow:visible.