cancel
Showing results for 
Search instead for 
Did you mean: 

Distorting forum layout, FireFox

Community Veteran
Posts: 4,729
Registered: 04-04-2007

Distorting forum layout, FireFox

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
15 REPLIES
MikeWhitehead
Grafter
Posts: 748
Registered: 19-08-2007

Re: Distorting forum layout, FireFox

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.
MikeWhitehead
Grafter
Posts: 748
Registered: 19-08-2007

Re: Distorting forum layout, FireFox

EDIT: Deleted the entire previous post because I found a better fix Tongue (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% Tongue Just tested it editing this page at runtime and it works perfectly.
MikeWhitehead
Grafter
Posts: 748
Registered: 19-08-2007

Re: Distorting forum layout, FireFox

Giving this a bump to see if anyone picks it up and fixes it. Really starting to bug me now Tongue
Community Veteran
Posts: 1,264
Registered: 04-04-2007

Re: Distorting forum layout, FireFox

Is there some reason for not just putting it straight in the stylesheet?
MikeWhitehead
Grafter
Posts: 748
Registered: 19-08-2007

Re: Distorting forum layout, FireFox

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.
VileReynard
Seasoned Pro
Posts: 10,579
Thanks: 190
Fixes: 9
Registered: 01-09-2007

Re: Distorting forum layout, FireFox

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.

MikeWhitehead
Grafter
Posts: 748
Registered: 19-08-2007

Re: Distorting forum layout, FireFox

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).
VileReynard
Seasoned Pro
Posts: 10,579
Thanks: 190
Fixes: 9
Registered: 01-09-2007

Re: Distorting forum layout, FireFox

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.

MikeWhitehead
Grafter
Posts: 748
Registered: 19-08-2007

Re: Distorting forum layout, FireFox

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.
VileReynard
Seasoned Pro
Posts: 10,579
Thanks: 190
Fixes: 9
Registered: 01-09-2007

Re: Distorting forum layout, FireFox

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 ( Roll eyes ) change to the css would provide a fix?

Community Veteran
Posts: 38,241
Thanks: 933
Fixes: 54
Registered: 15-06-2007

Re: Distorting forum layout, FireFox

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
MikeWhitehead
Grafter
Posts: 748
Registered: 19-08-2007

Re: Distorting forum layout, FireFox

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.
VileReynard
Seasoned Pro
Posts: 10,579
Thanks: 190
Fixes: 9
Registered: 01-09-2007

Re: Distorting forum layout, FireFox

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

Community Veteran
Posts: 26,372
Thanks: 629
Fixes: 8
Registered: 10-04-2007

Re: Distorting forum layout, FireFox

Time to move this to Resolved bugs?
jelv (a.k.a Spoon Whittler)
   Why I have left Plusnet (warning: long post!)   
Broadband: Andrews & Arnold Home::1 (FTTC 80/20)
Line rental: Pulse 8 Home Line Rental (£13/month)
Mobile: iD mobile (£4/month)