16
\$\begingroup\$

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:

enter image description here

Picture taken in Windows 7 using the latest Google Chrome.

\$\endgroup\$
  • 2
    \$\begingroup\$ Was going to post this as well. Same thing in Firefox on Mac. Same issue on meta. \$\endgroup\$ – C. Ross May 7 '14 at 1:01
  • \$\begingroup\$ 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]. \$\endgroup\$ – SevenSidedDie Dec 5 '15 at 23:17
  • \$\begingroup\$ @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.” \$\endgroup\$ – KRyan Dec 8 '15 at 16:03
  • \$\begingroup\$ @KRyan What is it covering now? \$\endgroup\$ – SevenSidedDie Dec 8 '15 at 16:05
  • \$\begingroup\$ @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. \$\endgroup\$ – KRyan Dec 8 '15 at 16:06
  • \$\begingroup\$ @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. \$\endgroup\$ – SevenSidedDie Dec 8 '15 at 16:08
  • \$\begingroup\$ @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. \$\endgroup\$ – KRyan Dec 8 '15 at 16:10
  • \$\begingroup\$ @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. \$\endgroup\$ – SevenSidedDie Dec 8 '15 at 16:13
  • 1
    \$\begingroup\$ @SevenSidedDie Define "author of this bug". You mean the person who wrote the CSS? Because I didn't flag anything \$\endgroup\$ – Yamikuronue Dec 8 '15 at 16:14
  • 1
    \$\begingroup\$ @Yamikuronue Sorry, you're right. The flagger was Ilmari Karonen, who identified the error. \$\endgroup\$ – SevenSidedDie Dec 8 '15 at 16:16
  • 1
    \$\begingroup\$ @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 \$\endgroup\$ – Yamikuronue Dec 8 '15 at 16:17
8
\$\begingroup\$

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":
Screenshot of fake system message with CSS bug

Fixed rendering with "clear: both": Screenshot of fake system message with the bug fixed

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:
Screenshot of RPG.SE read-only notice after redesign

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:
Screenshot of restyled RPG.SE read-only notice

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.

\$\endgroup\$
  • 3
    \$\begingroup\$ 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. \$\endgroup\$ – doppelgreener Aug 25 '15 at 23:34
  • \$\begingroup\$ 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. \$\endgroup\$ – MrLemon Aug 27 '15 at 8:19
2
\$\begingroup\$

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

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .