34

When browsing Stack Overflow without JavaScript enabled, or when the JavaScript code failed to load for some reason (before the introduction of the new top bar), one would get a red banner at the top of the page telling you that JavaScript is needed or that "scripts from another domain are blocked or failed to load".

Now, the new top bar covers that banner (presumably due to z-index ordering) - if I delete it with developer tools, I can see that it's still there, just covered:

Screenshot

Can the z-index ordering for this be fixed?

4
  • 27
    Make sure you fix it with JavaScript though ;). Commented Mar 2, 2017 at 19:03
  • This is the problem with removing the header (topbar) from the flow of the page.
    – Travis J
    Commented Mar 2, 2017 at 20:42
  • 3
    I am surprised, how can anything that hides a "JS is needed" message not be called a feature? Commented Mar 3, 2017 at 19:19
  • It's back. Since ~12:00 EDT.
    – lit
    Commented Jul 30, 2019 at 20:25

1 Answer 1

12

One main problem with creating a "sticky" or non stick top bar was that using position:fixed or position:absolute will remove the element from the document flow. This means that other elements do not consider the header when positioning themselves. To combat this, the main content of Stack Overflow unilaterally has a padding to the top of 60 pixels.

If you look at the noscript HTML it looks like this:

<noscript><div id="noscript-padding"></div></noscript>

Looking at the included CSS, the definition for #noscript-padding is

#noscript-padding {
    padding-top: 1.9em;
}

Which is insufficient to overcome the top bar. This definition should be

#noscript-padding {
    padding-top: 60px;
}

In order to be visible starting after the top bar.

Optionally it could also be:

#noscript-padding {
    padding-top: 60px;
    position: absolute;
}

which would avoid pushing the main content down another 60 pixels creating a rather large gap, so long as the message saying "needs more jQuery" "works best with JavaScript" is not taller than the 60 pixels whitespace allotted between the top bar and the content.

6
  • They could also prepend it to whichever element is offset by 60px already.
    – Jed Fox
    Commented Mar 3, 2017 at 19:01
  • This seems to call for a convoluted evolution of the infamous spacer gif. Commented Mar 3, 2017 at 19:17
  • 2
    As noted, the definition for padding-top is already present. In addition, padding-top is already in use in the main content of the page to offset the top bar (in fact, this has been used in many places, such as making the colored underline for current tab). Convoluted? I am sorry that this seems hard to follow, but it is rather direct and inline with already in use practices. Perhaps you should read up on this at the W3C w3.org/wiki/CSS_static_and_relative_positioning , w3.org/wiki/CSS_absolute_and_fixed_positioning , w3.org/TR/CSS2/visuren.html
    – Travis J
    Commented Mar 3, 2017 at 21:48
  • Looks like this was fixed a while ago now... By making the JS banner push the topbar down instead of the reverse.
    – Shog9
    Commented Jun 26, 2018 at 21:59
  • @Shog9 - It appears what they did was to include a style rule inside of the noscript element, body,.top-bar{margin-top:1.9em} which essentially gives the message the space it needs.
    – Travis J
    Commented Jun 26, 2018 at 22:53
  • Yep, that's the one. @TravisJ
    – Shog9
    Commented Jun 26, 2018 at 22:55

You must log in to answer this question.

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