Design & Dev

A Firefox Quirk You May Not Be Aware Of

When I was making some updates to the Portent Blog, I came across a strange problem. Whenever I highlighted the text with my cursor, I would get no visual feedback showing me what I had highlighted. I’ve actually run across this on a couple of other sites, which is why I thought I should share it. My coworker Anna discovered the solution, but since she doesn’t write blog posts I’m going to pretend it was me.

Viewing in Firefox 3 on Windows.

If you go to, using Firefox on the Windows platform, you can see what I’m talking about. I can highlight, copy, and paste text, but the highlighter doesn’t behave as I expect it to.
If you remove the background image, you can begin to see why this is happening.

Copyblogger without the background image

The background color of the site is a dark gray color, and firefox highlights the text in reverse. In IE or even in Firefox on a Mac, this doesn’t seem to happen.

The Solution

If you look at the stylesheet, you can see that the background image of this area is defined, but no background color is specified. This leads firefox to believe the background is transparent.

Here is a simple solution:

With background-color specified

Now you can highlight the text as normal.

Start call to action

See how Portent can help you own your piece of the web.

End call to action
Close Mobile Menu Button
Close search overlay