PRE tags and FF4 [Workaround found]

[Uly]

I recently moved to Firefox 4 and noticed the behavior of pre tags is different, and worse, than Firefox 2's.

Firefox 2:



Firefox 4:



Instead of each pre box with its own scrollbar, I get a giant scrollbar for the whole page, that makes all the text hard to read (one has to scroll back and forth).

I know it's the browser's fault (or mine for upgrading, but it was about time!), just wondering if someone knows what's up with this.

[UncombedCoconut]

Disclaimer: I have no useful post-1995 web design knowledge.
I upgraded the box I'm using from FF 3.6.x to FF 4.0 and saw the same misbehavior. I thought the second item here might be relevant, even if it mentions different elements. But once I'd installed Firebug and restarted FF to inspect the code box, the darned browser put the scrollbars where we want them.
So... does this happen after a FF restart? Does Firebug call the box a <pre> with the CSS overflow:auto attribute as expected?

Trying with a clean profile probably won't help, but it's tempting to suggest it.

[Uly]

Trying with a clean profile probably won't help, but it's tempting to suggest it.

After my bad experience with Firefox 3, I learned that when upgrading, always start with a new profile. So I did that and started from the ground up, I have yet to reinstall all my plugins.

I thought the second item here might be relevant, even if it mentions different elements. But once I'd installed Firebug and restarted FF to inspect the code box, the darned browser put the scrollbars where we want them.

Thanks, so perhaps this is a problem that can be solved with the Stylish plugin? It's one I have yet to reinstall, but if this is the case then I'll provide a fix.

[UncombedCoconut]

Thanks, so perhaps this is a problem that can be solved with the Stylish plugin? It's one I have yet to reinstall, but if this is the case then I'll provide a fix.

I can't confirm or deny that. I never installed "Stylish", and I can no longer reproduce the problem. But I absolutely did see the problem occur, on the first run...

[Uly]

Thanks. Alright, I found a workaround with Stylish that solves the problem, here's the code:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("www.open-chess.org") {

pre {
width:512px !important;
} 

}

Curiously, limiting the width makes the scrollbars appear correctly, though I guess other users with this problem would need higher width so their boxes aren't too thin.

[Peter C]

I'd go for reporting it as a bug, as that's definitely not desired behavior. Going for something like

Code: Select all

pre {
    overflow: scroll;
} 

might work.

[Uly]

I'm going to test it on this thread:

This is a long line of text. This is a long line of text. This is a long line of text. This is a long line of text.

For some reason overflow: scroll; isn't working, a scrollbar appears but it is blank, so one has to scroll the whole page. Do you mean it's a bug in Firefox 4?

Well, width:512px !important; works just fine without problems.

Screenshot with overflow: scroll;:



(Odd scrollbars appear but they do nothing)