516259 - New templates cause overflow problem on site pages

Status: RESOLVED FIXED

(www.mozilla.org :: General, defect, P1)

Description

[Stefan Plewako [:stef]]

Attachment: screenshot

There is a problem with content overflow (missing horizontal scrollbar somewhere?) on mozilla.org/projects/tinderbox/ (see attachment)

Comment 1

[David Boswell]

It may make more sense to remove this page instead of fixing it since it was last updated in 2000 (not counting recent changes related to the implmentation of the new design).

http://viewvc.svn.mozilla.org/vc/projects/mozilla.org/trunk/projects/tinderbox/index.html?view=log

Comment 2

[Stefan Plewako [:stef]]

> There is a problem with content overflow (missing horizontal scrollbar
> somewhere?) on mozilla.org/projects/tinderbox/ (see attachment)

The same here: http://www.mozilla.org/unix/customizing.html

Comment 3

[David Boswell]

Stefan, are you seeing this issue just on those two pages mentioned above or on all pages on the site?  There is a known horizontal scrolling issue with the new templates (bug 513272) that may be the issue here.

The other possible culprit is the use of long lines of text wrapped in pre tags on both pages.  Are you seeing the same behavior on these pages in the old design?  For reference:

http://www-archive.mozilla.org/projects/tinderbox/
http://www-archive.mozilla.org/unix/customizing.html

Comment 4

[Stefan Plewako [:stef]]

(In reply to comment #3)
> Stefan, are you seeing this issue just on those two pages mentioned above 
> or on all pages on the site? 

Not on every single one, on these two so far but I didn't check many, just reporting what I accidentally found while surfing.

> There is a known horizontal scrolling issue with the
> new templates (bug 513272) that may be the issue here.

Not very detailed, thought. (hard to find and tell if is related)

> The other possible culprit is the use of long lines of text wrapped in pre
> tags on both pages.
> Are you seeing the same behavior on these pages in the old design?

No, I don't.

Comment 5

[David Boswell]

I just archived the Tinderbox page (bug 494052) and updated the summary of this bug to reflect that this is a problem with other pages.

Comment 6

[Stefan Plewako [:stef]]

Attachment: http://www.mozilla.org/projects/firefox/prerelease.html

Comment 7

[Stefan Plewako [:stef]]

+ http://www.mozilla.org/community/developer-forums.html

Comment 8

[Stefan Plewako [:stef]]

+ http://www.mozilla.org/about/parks/

Comment 10

[KitchM]

I didn't realize that this was epidemic on the whole site.  It seems to be popping up all over.  Wow.

But please, no horizontal scrollbars.  That's not a solution.

Comment 11

[Stefan Plewako [:stef]]

+ http://www.mozilla.org/projects/namoroka/

Comment 15

[KitchM]

Wow.  The problem seems to be expanding.  Isn't there anything anyone can do to fix it?

Comment 16

[David Boswell]

I don't think this is expanding -- it's the same problem it was originally with the site-wide templates.  It's just getting reported on more pages over time.

As for fixing it fantasai said she'd be taking a look at this, but other patches are welcome.

Comment 17

[Brian Polidoro]

I'm changing the URL since the current URL goes to archive.mozilla.org which doesn't show the problem since that's the old site.

But I minimized this page:
http://www.mozilla.org/unix/customizing.html

The basic problem is with items that do not shrink.  On the page I minimized it's the <pre> blocks.  Other pages that I looked at from the duplicate bugs have other items that don't shrink like images and form fields.  Since overflow-x:hidden is set on the body these unshrinakble items can end up off of the visible part of the page if the page is not wide enough with no scroll bar to access what you can't see.  The simplest fix would be to remove that overflow rule.

Comment 18

[David Boswell]

I'm fine with removing the overflow rule, but I'm concerned about having the opposite problem -- having a horizontal scrollbar show up when there's no content off screen and potentially confusing people that way.  Doing that would just be a band-aid though and doesn't really fix the problem with the template.

Anyway, I'm interested in hearing what fantasai thinks about this.

Comment 19

[KitchM]

Please don't forget that there should be no horizontal scroll bars at all.  Content must flow down, not across.

Comment 20

[Brian Polidoro]

That may be your ideal case but it's just not reality.

The problem here is that not everything can do that.  Preformatted blocks can't change to fit any width.  Otherwise they lose the desired format. Form fields, images and pretty much anything really can have a set width that can't adjust to width of the page layout.

Avoiding a horizontal scroll bar is preferable.  But outlawing them will inevitably run into these problems.

Comment 22

[KitchM]

If one can't figure out how to have a block that can change its size without losing its format, use the lowest common denominator size and then add a horizontal scrollbar to it.  Problem solved.

Comment 24

[Brian Polidoro]

(In reply to comment #18)
>having a horizontal scrollbar show up when there's no content off screen

What are some examples of this?

Comment 25

[David Boswell]

In terms of comment #24, I think this applies to most of the pages on the site.  Any page without any content getting cut off still has a hidden area off to the right that you can scroll to even though there's nothing there.

Comment 26

[John J. Barton]

Regarding comment 24, see bug 532337, where I gave a specific page.

Comment 27

[Brian Polidoro]

Attachment: reduced testcase

I reduced the problem down to this.  The nav UL in the header is where the problem is with the unnecessary scroll bar which is why it would affect any page.  I'd go back to the designer and say stop wallpapering over the problem here with overflow-x: hidden and fix the problem.

Comment 28

[David Boswell]

Brian, thanks for helping us narrow down the issue.

Patches are certainly welcome.  We can also look into folding this into the upcoming home page design project.

Comment 29

[KitchM]

Is there any way that designers can be found who don't let this sort of problem happen in the first place?  Or could it be that maybe it boils down to creating a set of rules to which everyone in all parts of Mozilla should adhere?  IMHO, I am not convinced that it is in anyone's best interest to continually have to reinvent the wheel by going over these sorts of issues time after time.  But I am convinced that the outcome of the next redesign project will be the same until these sorts of foundational issues are put to rest.

Thanks.

Comment 30

[David Boswell]

Re comment #29, I agree that we could do a better job here.  I'd like to see us create a Mozilla style guide that covers HTML and CSS coding and can include templates that other sites could reuse to help avoid these sorts of issues.

Comment 31

[KitchM]

Absolutely great idea.  No doubt about it.  However, I wonder if we could take an idea from the concept of design by contract or programming by contract.  Why not simply state what must be (or is not allowed) and leave the how-to up to the professionals?

Comment 32

[David Boswell]

Stating what is or is not allowed is a good first step for a style guide :)

Comment 33

[KitchM]

But isn't a guide more like a suggestion?  A contract is a requirement by law.  I know that there are a lot of volunteers, but the target of this must be the paid supervisors who are letting the shoddy work slip past them.  At least, that's the way it appears IMHO.

Comment 36

[KitchM]

As of this date, my particular example seems to have been fixed.  There is even a slight name change to the page, but it fills the screen properly.

Thanks to whomever did it.

Comment 37

[Stefan Plewako [:stef]]

(In reply to comment #36)
> As of this date, my particular example seems to have been fixed.  There is even
> a slight name change to the page, but it fills the screen properly.

I can still see the problem in yesterdays trunk nightly on mac, one page was changed and I needed to resize the browser window.

Comment 38

[David Boswell]

Closing as fixed.  We just went live with new templates that address this problem.  Scrollbars now appear if there is any content cut off on the page.

Comment 39

[KitchM]

Thanks to all.  Much appreciated.