Skin does not handle read-only mode well

During the outage earlier today, it looked like the explanatory bar saying that the site was in read-only mode was overlapping the header graphic:

Picture taken in Windows 7 using the latest Google Chrome.

• Was going to post this as well. Same thing in Firefox on Mac. Same issue on meta. May 7, 2014 at 1:01
• The recent site redesign appears to have fixed this so that it's legible and decently-placed. The current form may not be the intended aesthetics, but the functionality is no longer buggy and I'm marking it [status-completed]. Dec 5, 2015 at 23:17
• @SevenSidedDie I completely disagree with that. It is misplaced; not as badly, but it still clearly extends out over other elements that it isn’t supposed to. Things not being as they are supposed to be is the definition of a bug. “Improvement” is not the same as “complete.” Dec 8, 2015 at 16:03
• @KRyan What is it covering now? Dec 8, 2015 at 16:05
• @SevenSidedDie It extends out past the edges of the “paper” central section of the site, onto the “grid” background and the bottom edge of the header. Dec 8, 2015 at 16:06
• @KRyan Oh, yes. But that's crappy aesthetics. It's at least functional, readable, and not impairing its visibility or use of other page elements. Notice too that it's been added as a design bug to the Updates meta—the poor aesthetics do belong there as a bug report on the new styling. Dec 8, 2015 at 16:08
• @SevenSidedDie Considering how long this has gone ignored, I feel that it’s best to give it all the exposure we can, not to prematurely mark it as complete when the process of fixing the problem is still clearly incomplete. Dec 8, 2015 at 16:10
• @KRyan As a bug report though, this page is associated with the old design. The original report was about functionality issues, with a side of aesthetics. The main point of contact for bugs, aesthetic and otherwise, in the recent update is the Update meta. The author of this bug report had flagged it to be marked complete and has made an entry over there. Dec 8, 2015 at 16:13
• @SevenSidedDie Define "author of this bug". You mean the person who wrote the CSS? Because I didn't flag anything Dec 8, 2015 at 16:14
• @Yamikuronue Sorry, you're right. The flagger was Ilmari Karonen, who identified the error. Dec 8, 2015 at 16:16
• @SevenSidedDie Cool. Personally, as long as the bug report exists somewhere, I don't mind this being closed, but as for where it lives, I don't really feel strongly about it either way, so whatever the community decides is fine Dec 8, 2015 at 16:17

This seems to be a simple CSS bug / typo in the RPG.SE style sheet. Specifically, the style declaration for #system-message here on RPG.SE says:

clear: none;


when it should say (and on every other SE site I've checked, does say):

clear: both;


Given that there's no reason to actually specify clear: none here (it's the default value anyway), that every other SE site has clear: both here, and that fixing the style makes the message appear the way it's presumably meant to appear, I'm going to bet that this a simple CSS typo.

Anyway, here's a before-and-after comparison of current the site notice appearance, and how the same notice would look if this bug was fixed (click the images for full resolution):

Current buggy rendering with "clear: none":

Fixed rendering with "clear: both":

That actually looks pretty nice, doesn't it? Clearly, some thought went into making these notices look good, but it seems there was a last-minute bug that broke it. :-(

Ps. While waiting for SE to fix this bug properly (which will hopefully happen when RPG.SE gets the CSS overhaul, if not before), I've added a client-side fix for it to the next version of the SOUP user script. (Of course, it won't actually do anything until the next time a system message appears here on RPG.SE, but if you're using SOUP anyway, you'll get it along with all the other fixes.)

Update: Looks like the new design has sort of fixed this:

Current read-only notice, as of December 5, 2015:

While this is probably OK for things like temporary failure notices, if we ever wanted a more long-term notice (e.g. to celebrate an important milestone, like SO did for the ten millionth question), a bit of restyling could turn the new notice into something like it was presumably originally meant to look like. Here's what I came up with, while waiting for the site to come back online after the recent outage:

#system-message {
clear: both;
position: relative;
box-sizing: border-box;
width: 1000px;
margin: 0 auto;
border: 0px none;
background: transparent url("http://cdn.sstatic.net/rpg/img/bg-nav.png") no-repeat scroll bottom;
line-height: 1.3;
font-size: 12px;
color: #FFEACD;
}
#system-message a { color: #FFA92D }
#system-message a:visited { color: #EF9718 }


yielding this appearance:

Current read-only notice, restyled as above:

The background image is the same as in the menu above the notice. Reusing the menu background like that does risk the notice looking kind of ugly and broken if the text in it is long enough to wrap onto two lines. Using a separate, vertically tileable background image for the notice would fix that.

• Whoa, so that's what it's meant to look like! Thanks for identifying what's going on. :) The broken across-the-banner version is way more attention grabbing, I notice, though has the downside of the whole broken thing. Aug 25, 2015 at 23:34
• We should add this to a list of fixes our style-sheet needs, along with the long-outstanding headings issues. But I have no idea who actually has access to the style-sheet. Aug 27, 2015 at 8:19

The read-only banner kinda looks outright broken now, given its recent content changes. Take a close look at the text of the banner: