Today I'm cross-browser testing a new site prior to launching it. As usual, this involves some styling gymnastics in order to make the site look better-than-terrible in Internet Explorer. But today, I came across an issue in Firefox that I couldn't explain.

The site I'm building advertises a cycling event. It has a few blocks like this:

<section class="sponsor">...</section>

They contain information about the sponsors of the event. Remarkably, even though these blocks show up in everyone's favorite ten-year-old browser, they don't appear in any version of Firefox on my drive.

Seriously? Yes.

These blocks are invisible in Firefox. The browser modifies them to give them a display:none; attribute.

But the best part is, if I change the section's class to anything other than "sponsor", the blocks show up just fine. In fact, once you know the cause, that's the only solution: Don't give items on your page a CSS class of "sponsor".

Think you know what caused it? Check it out.

Tweet