PRE tags and FF4 [Workaround found]

Forum-related questions, complaints and discussion...
Post Reply
User avatar
Uly
Posts: 838
Joined: Thu Jun 10, 2010 5:33 am

PRE tags and FF4 [Workaround found]

Post by Uly » Mon Apr 25, 2011 4:46 am

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

Firefox 2:

Image

Firefox 4:

Image

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
Posts: 44
Joined: Thu Jun 10, 2010 1:43 am
Real Name: Justin Blanchard
Location: United States

Re: PRE tags and FF4

Post by UncombedCoconut » Mon Apr 25, 2011 7:51 pm

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.

User avatar
Uly
Posts: 838
Joined: Thu Jun 10, 2010 5:33 am

Re: PRE tags and FF4

Post by Uly » Tue Apr 26, 2011 2:57 am

UncombedCoconut wrote: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.
UncombedCoconut wrote: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
Posts: 44
Joined: Thu Jun 10, 2010 1:43 am
Real Name: Justin Blanchard
Location: United States

Re: PRE tags and FF4

Post by UncombedCoconut » Tue Apr 26, 2011 9:53 am

Uly wrote: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...

User avatar
Uly
Posts: 838
Joined: Thu Jun 10, 2010 5:33 am

Re: PRE tags and FF4

Post by Uly » Wed Apr 27, 2011 11:21 am

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
Posts: 154
Joined: Thu Jun 10, 2010 3:12 am
Real Name: Peter C

Re: PRE tags and FF4 [Workaround found]

Post by Peter C » Wed Jun 08, 2011 10:20 pm

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.

User avatar
Uly
Posts: 838
Joined: Thu Jun 10, 2010 5:33 am

Re: PRE tags and FF4 [Workaround found]

Post by Uly » Thu Jun 09, 2011 12:19 am

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;:

Image

(Odd scrollbars appear but they do nothing)

Post Reply