3
$\begingroup$

The transition from the content box to the footer box seems a little broken on meta:

enter image description here

For reference on main:

enter image description here

Tested in Firefox and Opera.

$\endgroup$
3
  • $\begingroup$ Not a huge thingy, but I can confirm it's there. The floating bar is a bit weird though :) $\endgroup$
    – Maarten Bodewes Mod
    Jan 2, 2016 at 2:10
  • 1
    $\begingroup$ Thanks, I'm on it! $\endgroup$
    – Paweł
    Jan 4, 2016 at 13:24
  • 1
    $\begingroup$ Ok, it's fixed. It should be visible after one of the coming build releases. $\endgroup$
    – Paweł
    Jan 4, 2016 at 13:29

1 Answer 1

2
$\begingroup$

Confirmed. For some reason, right at the end of the Meta style sheet there's this ruleset:

#footer {
    background-color:rgba(0,0,0,0.1);
    margin-top:-30px;
    padding-top:30px
}

The padding-top: 30px rule is what's causing this funny rendering. Simply removing the last two lines will fix the problem.


BTW, while looking into this, I noticed that our style sheet actually contains three redundant, slightly different sets of footer styles (plus a few scattered styles here and there).

The first, most complete set is found near the middle of the style sheet:

#footer {
    padding-top:20px
}
#footer #footer-menu {
    margin-bottom:1.5em;
    line-height:1.7em
}
#footer #footer-menu a {
    margin:0
}
#footer #footer-menu a.more {
    font-weight:bold
}
#footer #footer-menu .top-footer-links a {
    margin:0 .8em 0 0
}
#footer #copyright {
    font-size:100%;
    font-weight:bold;
    border:none;
    color:#777;
    padding:0
}
#footer #copyright a {
    text-decoration:none
}
#footer #footer-flair {
    margin:0;
    margin-top:-40px;
    padding:0
}
#footer #svnrev {
    text-align:left;
    font-size:10px;
    margin-bottom:10px;
    color:#ccc
}
#footer #footer-sites {
    clear:both;
    width:1000px;
    margin:1.5em auto
}
#footer th,#footer td {
    margin:0;
    width:130px;
    padding:0 15px 0 0;
    text-align:left;
    text-transform:uppercase;
    font-size:.9em
}
#footer th {
    color:#777;
    padding-bottom:1em;
    line-height:1.3
}
#footer td {
    vertical-align:top
}
#footer li {
    list-style:none;
    line-height:1.3em;
    margin-bottom:10px;
    text-transform:none;
    font-size:1em
}
#footer ol {
    margin:0
}
.footerwrap {
    width:1000px;
    padding:15px;
    margin:0 auto;
    text-align:left;
    box-sizing:content-box
}
#footer {
    clear:both
}
#footer-menu {
    float:left
}
#footer-flair {
    float:right;
    text-align:right
}
#footer-flair a {
    display:inline-block;
    vertical-align:top;
    text-indent:-999999em
}

This one has no background at all, and sets a 20px top padding that produces an effect similar to this bug.

(Below this, there's another rule that hides the #footer element completely with display: none, but it's nested inside a @media print section, and so only applied when printing.)

Near the end of the style sheet, however, there's another set of styles that overrides most of the above:

#footer {
    background-color:rgba(201,207,216,0.5);
    padding-top:0
}
#footer .footerwrap {
    border-top:30px solid #fff;
    padding:25px 15px 15px 15px
}
#footer .footerwrap #footer-menu .top-footer-links {
    text-align:center
}
#footer .footerwrap #footer-menu .top-footer-links a {
    margin:0 2em 0 0;
    color:#717171
}
#footer .footerwrap #footer-menu .top-footer-links a:hover {
    color:#cf7721
}
#footer .footerwrap #footer-menu #footer-sites {
    margin:40px 0 20px 0
}
#footer .footerwrap #footer-menu #footer-sites th {
    color:#3e3e3e
}
#footer .footerwrap #footer-menu #footer-sites a {
    color:rgba(29,46,71,0.6);
    font-size:12px
}
#footer .footerwrap #footer-menu #footer-sites a:hover {
    color:#cf7721
}
#footer .footerwrap #copyright,#footer .footerwrap #additional-notices,#footer .footerwrap #svnrev {
    clear:both;
    padding-top:10px;
    font-size:11px;
    font-weight:400;
    text-align:center;
    color:#979797
}
#footer .footerwrap #copyright a,#footer .footerwrap #additional-notices a,#footer .footerwrap #svnrev a {
    color:#979797;
    text-decoration:underline
}
#footer .footerwrap #svnrev {
    padding-top:0
}

This one undoes the padding set earlier, and also adds a bluish-gray translucent background.

And then, a little bit below that, there's a third set of footer styles! Unlike the above two, which are also present (with some color changes) on the main site, this one seems to be specific to meta:

#footer {
    background:#f6f6f6
}
#footer #footer-menu .top-footer-links a {
    color:#cf7721
}
#footer #footer-menu .top-footer-links a:hover {
    color:#df7900
}
#footer #footer-sites a {
    color:#555
}
#footer th {
    color:#424242
}
#footer #copyright,#footer #additional-notices,#footer #svnrev {
    color:#999
}
#footer #copyright a,#footer #additional-notices a,#footer #svnrev a {
    color:#777;
    text-decoration:underline
}

This one replaces the translucent background with a solid gray; any other effects of these styles seem minimal at a glance.

And, of course, finally there's the very last block that I already quoted at the top of this answer, which again replaces the background set in the previous set of styles, this time with just a 10% opaque black tint (and also includes the buggy top margin and padding).

Of course, all this mostly seems to work (except when it doesn't, like here), so I guess there's no urgent need to mess with it, but I can't help but feel that this kind of style duplication can easily turn into a maintenance headache later on. I do see some sense in basing the meta style sheet on the main site one, and then overriding parts of it (although that doesn't seem to be how most of the meta style changes are actually implemented; based on a quick diff, mostly they're just in-place color swaps), but that would still require just two sets of footer styles — not three and a half.

Of course, none of this is really my problem (although these kinds of styling quirks do occasionally make maintaining SOUP interesting ;), so I really have no cause to complain. Take this "extended footnote" just as a friendly unsolicited suggestion, and feel free to ignore it or not as you like.

$\endgroup$
1
  • $\begingroup$ Hey, thanks for this review. The truth is that we have our CSS code written in many LESS files and then it's compiled into smaller pieces. It might seem to be messy, but believe me - Stack Exchange is really huge network and has lots of pages, cases, etc. etc we need to take care about. Not perfectly looking code after compiling is one of side-effects. But you're right. This could be improved. And we're on it :) $\endgroup$
    – Paweł
    Jan 4, 2016 at 13:33

You must log in to answer this question.

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