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 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.
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.
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.