This is what the math.SE newsletter ad box looks like to me on Firefox:

Screenshot of math.SE newsletter ad on Firefox

Notice how the bold font causes the "Sign up" button to overflow the space available for it.

According to the Firefox developer tools, the actual font being used (specified in the style sheet simply as "sans-serif", leaving the specific choice of font to the browser) is DejaVu Sans Bold.

On Chromium, this doesn't happen:

Screenshot of math.SE newsletter ad on Chromium

(Alas, the Chromium developer tools don't seem to have an option for showing the actual font being used; however, I can at least confirm that adding an explicit #newsletter-signup { font-family: "DejaVu Sans" } rule does cause the button to overflow just like on Firefox.)


1 Answer 1

The problem seems to be caused by the fact that button elements on math.SE have no explicit font specified — they're just styled as font-family: sans-serif. In most cases, this is pretty harmless, but in this particular case, the layout breaks if an unusually wide font, such as DejaVu Sans Bold, happens to get chosen.

Adding an explicit CSS rule like:

#newsletter-signup {
    font-family: 'Liberation Sans', Helvetica, Arial, sans-serif;

seems to fix this issue.

Another factor that further exacerbates the problem is that, the way the newsletter ad is currently styled, the button stops being centered once it bumps into the invisible 15 pixel padding on the left. This can also be easily fixed in CSS, simply by adding some negative horizontal margins on the button container. The exact amount doesn't matter much, but 15 pixels is enough to let the button fill the whole ad space horizontally if needed:

#newsletter-signup-container { margin: 0 -15px }

I've included both of these CSS fixes in SOUP v1.12.

Ps. This appears to be an issue, to a varying extent, on many SE sites (with pt.SO suffering from a particularly bad case, due to the translated text being longer than the original). In the next release of SOUP (v1.16), the -15px margin fix will be applied to all SE sites, while the font change will remain specific to math.SE. This should mitigate the issue on any sites where the extra 30 pixels are enough to make the button fit.


You must log in to answer this question.

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