A Firefox Quirk You May Not Be Aware Of
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.
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.
Jarrod has lent his extensive experience in web design, HTML, CSS and more to Portent for over 6 years. Read More
- Do You Use Data To Improve Your Website Design?
- How to use Intention.js for Responsive Design
- What Does a Degree in Architecture Have to Do with Web Design & Development?
- A Front-End Workflow For The Evolving Web
- Stop Writing Blog Posts: Ideas for Interactive Content
- Parallax Scrolling? HTML5 Animations? Why We’re Falling for New Design Techniques