When selecting something on a page, I noticed this oddity: (to reprodce press CTRL+A)

On closer inspection, I saw there's indeed the text "Meta Stack Exchange" inside the logo placeholder, with transparent color.

My first thought was that it's a fallback mechanism for those with images disabled, but when disabling images in my browser (Chrome), that's what I saw:

So what is the purpose of this transparent text? Or is this just a bug/leftover?

Checking other sites on Stack Exchange, they all appear to also have such text inside the logo placeholder, but hiding it by applying a big negative text-indent value, thus it's not showing even when selecting. Why is the difference here on MSE?

  • 4
    Screenreaders and/or search crawlers most likely
    – Tim Stone
    Commented Jan 10, 2017 at 13:41
  • @Tim oh. Is this some common way to put things in place? It doesn't break anything, just looking weird when selecting text or search. (browser highlights the transparent text.) Commented Jan 10, 2017 at 13:42
  • I'm not sure of the benefits of transparent text vs. offsetting it far out of the container, but otherwise yeah. I don't know which motivation(s) factor in specifically for SE though
    – Tim Stone
    Commented Jan 10, 2017 at 13:43
  • @Tim interesting, all other sites I checked appear to choose that "offsetting it far out of the container" you mentioned Commented Jan 10, 2017 at 13:50
  • Yes, and having that offset meant that the logo wasn't clickable... as it is on other sites.
    – Oded
    Commented Jan 10, 2017 at 14:00
  • @Oded what you mean? The logo is clickable for both options, here on MSE, and on those sites with the negative indent. Why not apply the same design in MSE? Commented Jan 10, 2017 at 14:02
  • OK. Give that text a negative indent as on other sites. Logo still clickable?
    – Oded
    Commented Jan 10, 2017 at 14:02
  • @Oded oh. Wait, there was such a bug. But still, how it works on other sites then? Commented Jan 10, 2017 at 14:03
  • I was never able to track it down completely - the fix was a compromise :/ - I think something else in the MSE css is the issue, but I don't know what.
    – Oded
    Commented Jan 10, 2017 at 14:03
  • @Oded I see. Might try and figure this out then, just for fun. Feel free to drop an answer, linking to that bug. :) Commented Jan 10, 2017 at 14:05
  • I actually can't reproduce with the default style, but it might be related to this bug. It seems the text-indent value that it starts to fail at is context or system dependent. If that were the case just some smaller indent value might work too
    – Tim Stone
    Commented Jan 10, 2017 at 14:24
  • @Tim on SO the text indent is -999999em and it's still clickable. Commented Jan 10, 2017 at 14:27
  • 1
    @Oded Hmm, MSE's font-size for #hlogo a seems atypically larger than the other sites (set specifically to 24px, for whatever reason), so the same em value probably more easily pushes it over the threshold for the above bug, if I had to guess
    – Tim Stone
    Commented Jan 10, 2017 at 14:28
  • @TimStone - I'll play around with that and see.
    – Oded
    Commented Jan 10, 2017 at 14:33
  • I remember I accidentally selected the logo some months ago, and this wasn't there.
    – M.A.R.
    Commented Jan 10, 2017 at 16:14

2 Answers 2


I've updated the CSS for this - mostly removing things.

The negative indent is back (removed the override), put the color back to what it was originally and the actual fix was to remove the 24px font size directive on the element (thanks to Tim Stone for pointing me at the right direction) - I have also removed a line-height directive.

With you in the next build.

  • I still see this now after a build, was it pulled back for some reason? :/ Commented Jan 11, 2017 at 15:56
  • Nope. Still there Ctrl + F5?
    – Oded
    Commented Jan 11, 2017 at 16:03
  • Oh. Duh. But still, aren't you using some cache busting mechanism when updating the CSS? Commented Jan 11, 2017 at 16:04
  • Should have busted, yeah. Not sure what that wouldn't work.
    – Oded
    Commented Jan 11, 2017 at 16:04
  • Let's see for other users... Commented Jan 11, 2017 at 16:04
  • At least one other user sees it @Sha. RE: chat
    – M.A.R.
    Commented Jan 11, 2017 at 16:07
  • @M.A.R. you mean you see the text when selecting (i.e. cache wasn't busted), or you don't see the text? (i.e. cache bust worked) Commented Jan 11, 2017 at 16:08
  • I see the text that shouldn't be there. AKA this isn't [status-completed] yet
    – M.A.R.
    Commented Jan 11, 2017 at 16:09
  • Hm. There is no cache buster on the CSS file URL. That's... strange. Will need to investigate further, @Sha
    – Oded
    Commented Jan 11, 2017 at 16:12
  • @M.A.R. well, it is, kind of. You just have to clear your cache first. :-) Commented Jan 11, 2017 at 16:13
  • @Oded huh! So two bugs in the price of one... :D Commented Jan 11, 2017 at 16:14
  • 1
    @ShadowWizard - looks like the cache buster is fixed.
    – Oded
    Commented Jan 12, 2017 at 9:15

Because the logo is actually a background image. In HTML, you can link an image, but only if it's actually in the DOM. The header appears to be this

#header {
    background: transparent url("img/[email protected]?v=2f4838039b7f") no-repeat scroll left center;

Now, the URL itself won't load for some reason (probably anti-scraping), but that's the Meta.SE header. So you have to have some sort of DOM object to link. So they add it as an actual link that sits, positionally, over the logo

<a href="/"> Meta Stack Exchange </a>

Seems screwy, but it does a few useful things

  1. Helps with SEO. Search Engines key in on the link text (yes, they still pay attention to that stuff).
  2. Helps with screen readers like Chromevox
  3. Legacy compatibility. Yes, people use all sorts of screwy browsers still. But <a href></a> is an HTML staple. If you don't load CSS at all, the link will still work.

You must log in to answer this question.

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