A Firefox Quirk You May Not Be Aware Of

Design & Development

Jarrod Medrano Aug 3 2008

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.

trashes.jpg
Viewing copyblogger.com in Firefox 3 on Windows.

If you go to copyblogger.com, 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.

trash.jpg
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:

trash1.jpg
With background-color specified

Now you can highlight the text as normal.

tags : copybloggerfirefox