Closed Bug 653137 Opened 11 years ago Closed 10 years ago

wiki.mozilla.org stylesheet broken so that the main content ends up below the sidebar

Categories

(Websites :: wiki.mozilla.org, defect)

x86
macOS
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: bzbarsky, Unassigned)

References

Details

(Whiteboard: [push-to-prod])

In my case, the window width minus the scrollbar width is 924px.

The wiki.mozilla.org stylesheets plus the Gecko default stylesheet give us the following styles:

1)  Body has 8px each left and right margins and an 880px min-width.
2)  #main has 3% left padding and 6% right padding.
3)  #wiki-tools has a 15% max-width (which it nearly hits in my case, because
    the "Log in / create account" text is long).
4)  #main-content has a 77% width 40px left margin and 15px each of left and
    right padding.

So in my ase, 924-16 = 908 > 880, so the body ends up with a width of 908px; things would be even worse if I hit that min-width.

To fit inside the body we have 3% + 6% + (15% + 77%)*93% + 40 + 2*15.

That's 94.56% + 70px.

This means that any time 70px > 5.44% of the body width, the #main-content won't fit next to the #wiki-tools and will get pushed down instead.

70px > 5.44% if and only if 1286.7647px > 100%.

So in other words, any time the body width is smaller than 1287px things won't fit on this page.

Recall now that the actual body width here is the bigger of 880px and "window width - 31px".  So this site breaks any time the browser window is narrower than 1318px, in general.  You might get lucky with your fonts and have the sidebar land at less than 15% width, which will give you more leeway.  But it certainly breaks at about 1000px wide for me.

Instead of using "77%" we should probably use "-moz-calc(85% - 70px)" for the #main-content width.
Or just use -moz-box-sizing: border-box.  That probably has better cross-browser support.
Fixed on stage in r102122/r102112 

http://viewvc.svn.mozilla.org/vc/projects/wikimo/trunk/skins/gmo/style/screen.css?r1=102112&r2=96449

Jake, please push to prod.
Status: NEW → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
Whiteboard: [push-to-prod]
Sorry,

correct revisions are r102111/r102112.
Hi Milos,

Could you please commit this fix to tags/production here:

http://viewvc.svn.mozilla.org/vc/projects/wikimo/tags/production/

That's what the production wikimo uses. Thanks!
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Blocks: 729987
Sure, done in r102142.
Status: REOPENED → RESOLVED
Closed: 10 years ago10 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.