[css-d] Oddity in FF3 related to overflow:auto
Hi, I've noticed that this page renders differently in FF3 than in other browsers: http://nedbatchelder.com/blog/200806/spore_creature_creator_and_steganograph y.html In FF3, the entire page has a horizontal scrollbar, and the content area is stretched to the full page width. The culprit is the long unbroken text in the comment by szevvy on 7:48 PM on 25 Jun 2008, although overflow:auto on .comment should've put the scrollbar on the comment block only. I've tried to distill it to a minimal test case, http://www.fjordaan.net/tests/overflow-test.html but this behaves correctly in FF3. Can anyone see what, on Ned's page, is causing FF3 to ignore overflow:auto? francois __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Oddity in FF3 related to overflow:auto
Francois Jordaan wrote: Hi, I've noticed that this page renders differently in FF3 than in other browsers: http://nedbatchelder.com/blog/200806/spore_creature_creator_and_steganograph y.html In FF3, the entire page has a horizontal scrollbar, and the content area is stretched to the full page width. The culprit is the long unbroken text in the comment by szevvy on 7:48 PM on 25 Jun 2008, although overflow:auto on .comment should've put the scrollbar on the comment block only. I've tried to distill it to a minimal test case, http://www.fjordaan.net/tests/overflow-test.html but this behaves correctly in FF3. Can anyone see what, on Ned's page, is causing FF3 to ignore overflow:auto? francois Both of these URLs render identically on my FF3/Ubuntu 8.04 system. -- /** * Bill Brown * TheHolierGrail.com MacNimble.com * From dot concept...to dot com...since 1999. ***/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Oddity in FF3 related to overflow:auto
On Jun 30, 2008, at 8:13 PM, Francois Jordaan wrote:
I've noticed that this page renders differently in FF3 than in other
browsers:
http://nedbatchelder.com/blog/200806/spore_creature_creator_and_steganograph
y.html
In FF3, the entire page has a horizontal scrollbar, and the content
area is
stretched to the full page width.
I don't see any problem on that page, but I'm confident that the issue
has been solved by locking the width of the .comments .comment div to
540px.
And I'm 100% sure that that page would have shown the same behaviour
with Safari 3.
The culprit is the long unbroken text in the comment by szevvy on
7:48 PM
on 25 Jun 2008, although overflow:auto on .comment should've put the
scrollbar on the comment block only.
correct as for the culprint.
I've tried to distill it to a minimal test case,
http://www.fjordaan.net/tests/overflow-test.html
but this behaves correctly in FF3.
You were nearly there; you're missing a table, though.
Here are a couple of test cases:
http://dev.l-c-n.com/_temp/tx-b409736-2.html
What is happening here: a table, with 'table-layout:auto' contains in
one column a block element with overflow set to scroll/auto/hidden.
When that element contains a very long string of unbreakable text, or
a very large image, the table expands to accommodate the width of that
text/image.
That is the CORRECT behaviour for a table with 'table-layout:auto'.
(Fx 2 was buggy in this, I consider Opera's behaviour buggy)
One way to 'fix' is what is done on the nedbatchelder.com page: lock
the 'width' of the element with overflow.
Easy to do within a layout that has frozen/fix width.
(the sample with a lime green background in my test file uses the same
technique.)
Another option to 'fix' this is using 'table-layout: fixed' and a set
width on the table (e.g table {width:50%; table-layout: fixed; }).
Note, I use 'fix', by this a mean 'control'.
For the curious, my short explanation above is is available in more
details in the comments of this bug report:
https://bugzilla.mozilla.org/show_bug.cgi?id=409736
pay attention to the comments by Daniel Holbert.
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Oddity in FF3 related to overflow:auto
http://nedbatchelder.com/blog/200806/spore_creature_creator_and_steganograph y.html Both of these URLs render identically on my FF3/Ubuntu 8.04 system. Damn, it seems he fixed it since I last looked, a couple of days ago. Sorry for not testing again before posting to the list. I'll email Ned to find out what he changed. f __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Oddity in FF3 related to overflow:auto
Very helpful, interesting reply, thanks Philippe! Despite me not noticing that Ned had updated his CSS to address the problem since I last looked. francois __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
