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.
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.
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:
Now you can highlight the text as normal.
Jarrod has lent his extensive experience in web design, HTML, CSS and more to Portent for over 6 years. Read More