So, what's the up and down votey suppose to be?

I don't know if this will help, but this fixed a banner in another subreddit:

Just change

#header, body.res-nightmode #header {
    background: #000 url(%%pcm-h1new%%);
    height: 150px;
}

to

#header, body.res-nightmode #header {
    background: #000 url(%%pcm-h1new%%) !important;
    height: 150px;
}

should be enough.

Also, here's some more on the subject of voting arrows in firefox/chrome (this was a year ago, so it could be different now):

In Chrome, it works perfectly because of how Chrome handles specificity.

If you don't already know, there are two things that determine whether a CSS rule is used or not: how many CSS elements the rule matches, and how late the rule itself is defined. Night mode adds some of its own classes to Reddit's HTML and then applies its own stylesheets; on subreddits that don't have Night Mode CSS in mind, this ends up breaking a whole lotta stuff because there's an unhealthy mix of regular CSS and Night Mode CSS that doesn't always go well together (and since Night Mode CSS is loaded in after subreddit CSS, it takes priority over regular CSS).

With the arrows, this becomes an issue because RES uses the !important declaration on that CSS, which says "hey prioritize this rule above all else unless there's an even more specific rule with !important. In Chrome, I was able to define a very specific rule with !important that somehow overrode RES's rule (so it all works!). In Firefox, it doesn't work, and I don't think that I can increase the specificity any more to force my styling. As such, Firefox CSS looks stupid while it works in Chrome.

Less than five minutes after I wrote that I wasn't sure if I could increase the specificity, I went into everything, added one new rule to my SASS generator for that bit, and of course everything began working as expected.

Hope that helps to some degree.

/r/EngineeringStudents Thread Parent