masthead too narrow when browser window has small width revels red dino watermark

RESOLVED FIXED

Status

developer.mozilla.org
Wiki pages
RESOLVED FIXED
8 years ago
6 years ago

People

(Reporter: ozten, Unassigned)

Tracking

Details

(Reporter)

Description

8 years ago
Fx 4b6 on Ubuntu 10.4

Repro Steps:
1) https://developer.mozilla.org/en-US/
2) Resize browser window to be small, like 600px
3) Scroll to right

Expected: header#masthead should be black all the way across the top of the screen.

Actual: header stops about 150px shy of the window edge reveling tan and a red dino ghost.
This is a common side effect of body overflow and you'll see it on a lot of fixed-width sites that have bars that still span the full window. The bars are sized to the body, which is sized to the window, but the content overflows that width. You can scroll to see the content, but the background stays where it was.

Some designers compensate by hiding the overflow, but then you can't even scroll to reach the content and that's even worse than seeing a semi-broken layout. The only sure-fire fix is to faux bars that are part of a background image applied to the root html element so they can extend past the body, but then we lose the flexibility of having movable and stylable bars.

In this case we can just add background colors to the inner wrapper divs so at least the light-colored text is still readable and the ghostly dino head is a bit less spooky.

Fixed in two tries:

http://github.com/fwenzel/mdn/commit/64823ebb5f4d2c316d43a2fe593bae9221e8cc33
http://github.com/fwenzel/mdn/commit/1431f12d063bf2c6f8d1507eee7528b619666171

(first one for the head, second one for the foot)
Status: NEW → RESOLVED
Last Resolved: 8 years ago
Resolution: --- → FIXED
(Reporter)

Comment 2

8 years ago
(In reply to comment #1)
Thanks for the quick turn around!
(Assignee)

Updated

6 years ago
Component: Website → Landing pages
Product: Mozilla Developer Network → Mozilla Developer Network
You need to log in before you can comment on or make changes to this bug.