topic Re: Distorting forum layout, FireFox in Community Site Feedback

Distorting forum layout, FireFox

chillypenguin — Mon, 01 Oct 2007 16:00:42 GMT

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

Re: Distorting forum layout, FireFox

MikeWhitehead — Mon, 01 Oct 2007 16:28:34 GMT

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.

Re: Distorting forum layout, FireFox

MikeWhitehead — Mon, 01 Oct 2007 18:31:01 GMT

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.

Re: Distorting forum layout, FireFox

MikeWhitehead — Sat, 13 Oct 2007 12:28:11 GMT

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

Re: Distorting forum layout, FireFox

Colin — Sat, 13 Oct 2007 20:56:16 GMT

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

Re: Distorting forum layout, FireFox

MikeWhitehead — Sat, 13 Oct 2007 21:13:26 GMT

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.

Re: Distorting forum layout, FireFox

VileReynard — Sat, 13 Oct 2007 21:25:22 GMT

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.

Re: Distorting forum layout, FireFox

MikeWhitehead — Sat, 13 Oct 2007 21:31:33 GMT

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).

Re: Distorting forum layout, FireFox

VileReynard — Sat, 13 Oct 2007 21:41:56 GMT

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.

Re: Distorting forum layout, FireFox

MikeWhitehead — Sat, 13 Oct 2007 21:44:28 GMT

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.

Re: Distorting forum layout, FireFox

VileReynard — Sat, 13 Oct 2007 22:06:07 GMT

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?

Re: Distorting forum layout, FireFox

Oldjim — Sat, 13 Oct 2007 22:14:28 GMT

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

Re: Distorting forum layout, FireFox

MikeWhitehead — Sat, 13 Oct 2007 22:21:29 GMT

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.

Re: Distorting forum layout, FireFox

VileReynard — Sat, 13 Oct 2007 22:26:18 GMT

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

Re: Distorting forum layout, FireFox

jelv — Fri, 15 Feb 2008 16:03:19 GMT

Time to move this to Resolved bugs?

Re: Distorting forum layout, FireFox

Mon, 18 Feb 2008 08:34:42 GMT

Aaaaaiiiii!