Skin does not handle read-only mode well

Question

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.

Answer 1

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;
  padding: 10px 45px;
  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;
  text-shadow: 0px 1px 0px #000;
}
#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.

Answer 2

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

Main

Meta

Beta site for comparison