Distorting forum layout, FireFox

[#1]

Large blocks of text without spaces word wrap to fit the screen layout in IE7 but do not in FireFox 2.0, leading to a distorted forum layout.
For example the code block in this thread;
http://community.plus.net/forum/index.php/topic,1816.msg17807.html#msg17807
Chilly

[#2]

I'm sure I worked out a fix for this when I was messing around with the styles, but it escapes me for now. I'll have a think and see if it pops up to me again.

[#3]

EDIT: Deleted the entire previous post because I found a better fix (not sure which lines exactly because PlusNet styling may have changed the numbering, but...)
In Sources/Subs.php, line 1127
FIND:

'content' => '<div class="codeheader">' . $txt['smf238'] . ':</div><div class="code">' . ($context['browser']['is_gecko'] ? '<pre style="margin-top: 0; display: inline;">$1</pre>' : '$1') . '</div>',

REPLACE WITH:

'content' => '<div class="codeheader">' . $txt['smf238'] . ':</div><div' . ($context['browser']['is_firefox'] ? ' style="overflow: scroll;"' : '') . ' class="code">' . ($context['browser']['is_gecko'] ? '<pre style="margin-top: 0; display: inline;">$1</pre>' : '$1') . '</div>',

In Sources/Subs.php, line 1165
FIND:

'content' => '<div class="codeheader">' . $txt['smf238'] . ': ($2)</div><div class="code">' . ($context['browser']['is_gecko'] ? '<pre style="margin-top: 0; display: inline;">$1</pre>' : '$1') . '</div>',

REPLACE WITH:

'content' => '<div class="codeheader">' . $txt['smf238'] . ': ($2)</div><div' . ($context['browser']['is_firefox'] ? ' style="overflow: scroll;"' : '') . ' class="code">' . ($context['browser']['is_gecko'] ? '<pre style="margin-top: 0; display: inline;">$1</pre>' : '$1') . '</div>',

This will (100% sure) fix the problem. There IS a neater fix possible, but I can't release it without seeing the contents of PlusNets index.template.php.
EDIT: Edit to change my 99.99% to 100% Just tested it editing this page at runtime and it works perfectly.

[#4]

Giving this a bump to see if anyone picks it up and fixes it. Really starting to bug me now

[#5]

Is there some reason for not just putting it straight in the stylesheet?

[#6]

Not really. I mean, IE wraps it fine, and the problem only appears in Firefox which is why I suggested that method. Stick it in the stylesheet and see what happens. I don't see why it should break other browsers.

[#7]

This is not totally broken.
On the reply screen large code blocks are shown at the same length as the purple headers (with the remainder readable at the RHS of the screen in normal text).
I know it's wrong - but I actually prefer unbroken code blocks.
Obviously it depends on the aspect ratio of your screen as to the level of irritation (if any) caused.

[#8]

1680 x 1050 resolution on a widescreen monitor, and quite a lot of code blocks throw the layout into chaos. It is broken in the reply screen, because that's not supposed to happen (and thats caused by the code window inheriting the tables specified width, which isn't what should happen (well, it's what should happen as that's what is defined, but it's due to bad coding).
How do you mean you prefer unbroken code blocks? Adding the overflow keeps the code all correctly tabbed and placed, it just makes sure the display isn't wrecked in Firefox. (IIRC, code gets messed up with the current settings in IE too, because it wraps when it shouldn't really for clarity of code blocks).

[#9]

Well, I'm on 1280 x 1024 - but most code blocks (apart from this topic) don't over-extend too much. Because wrapping would often make such a mess of the code block (e.g. a URL) I would prefer to see it unwrapped.
It's only really long code blocks that cause problems.

[#10]

Do you have the web developer add-on for Firefox? If so, choose to edit the CSS and alter the .code class to contain overflow: scroll;
If you do that while you are viewing this thread, you'll see that this solution doesn't cause inproper wrapping, but rather it keeps the width 100% and adds a scrollbar to allow viewing of the extended code which can't be shown in the immediate view.
EDIT: Added screenshot to show the outcome of the change, in case there is any confusion.

[#11]

Well, I've just installed the Web Developer plugin and although the results are quite a bit nicer than the plain screen-shot would suggest. I would still go for the current "broken" implementation.
Since I appear to be in a minority of one, then a simple ( ) change to the css would provide a fix?

[#12]

Can I link this old thread to it as it may be a similar problem/solution  http://community.plus.net/forum/index.php/topic,308.msg2296.html#msg2296

[#13]

Yep Oldjim, it's the exact same solution. overflow: scroll will add scrollbars as and when required.
@axisofevil
I don't quite understand what you mean you prefer the current broken version? Any reason why?

To expand, basically my previous solution was a change to the SMF code so that the scrollbar would only be applied from within Firefox, as all other browsers display code blocks within a 100% width, not breaking the layout. Thinking about it, making it display scrollbars on every browser is a much nicer solution, as it means code will retain its structure when being viewed.

[#14]

My only reason is that I think it looks better in the current form. Purely a personal preference.

[#15]

Time to move this to Resolved bugs?