Posted Wednesday, September 20, 2006 12:03:38 PM by Stephanie
In light of sharing this information quickly, I'm going to tell you the story of a little bug without a demo. (The site I'm working on is still NDA, so I can't illustrate it with that either.) I'll try to get one up soon.
I had worked most bugs out of the site and started testing outside Firefox (which I develop in) and IE PC (which typically has the most bugs). When I opened one of the pages in Safari, I was met with quite a surprise. Nearly all the links on the page were glowing a bright red. Perhaps it didn't actually glow, but when you're expecting a deep blue, it seems so. Well, what the heck!?
Obviously, my first thought was that I had something funky going on in the cascade. (There are some admin-only links in this site that are red.) In Dreamweaver, I clicked into one of the link headings. Using the Rules pane of the CSS styles panel, I started going up through the cascade. Nary a red link defined there. Hmmmm...
I commented the admin link completely out anyway -- just in case. Nada. Nothing. No change.
This is when Google is your friend. I googled and found a post where someone was reporting exactly the same thing. My old friend Philippe Wittenbergh found that the person reporting the problem had a couple missing CSS files linked in the head of their document. The 404 page (which of course, you don't actually see) has red links defined in the head. This selector was mistakenly overriding the links defined in the user's stylesheet. AHA! I've got it now!
I opened the remote side of the Files panel in DW and checked to be sure all the documents in the head were in the correct directories. They were. Hmmmmm...
It was late. My brain was dead. I went to sleep with visions of browser bugs dancing in my head.
I was going to go back to the remaining bugs later since I had other things to work on as well. I'm betting though that some of you can relate to getting a bit obsessive about a bug. I WILL smash this thing!
I was asking my friend, Vicki Berry Stanton, if she'd ever seen this one. As I went through the things I'd found, the steps I'd taken, and how I'd bombed out fixing it so far, I got an idea. (Isn't that how it usually works when you're stymied?) Using the Web Developer's Toolbar in Firefox (undoubtedly my favorite Firefox extension), I hit Cmd/Shft/C (or CSS > View CSS) to view all the style sheets linked to this XHTML document. When I got to the bottom of the results page, A 404 ERROR! Pardon me for shouting, but for once, I was pretty excited to see that error.
The odd thing was that the stylesheet referenced in the 404 didn't exist on my page. It was a second link to the niftycube.css and was not linked to the directory it should have been. Hmmmmm again... Where in the world was this invisible link coming from?
The Story has a Moral
- If you run into unexpected red text links in Safari, first check for any CSS documents that might be missing or mislinked. The 404 page will override your defined colors.
- For every bug the browsers bring, there's a shoe big enough to squash it!
Explanation... or Theory
A couple people have asked me if I know why this is happening. I do have a theory so I'm adding this amendment. My belief is that Safari is not validating that a document that is linked as CSS is actually CSS data. So, in the case of this bug, when Safari encounters the 404 HTML page instead of the CSS page that should be linked, it is parsing it as if it's CSS anyway. Thus, it renders any styles defined there in addition to the ones you have defined in your stylesheet. Including the lovely red links. You may, in fact, find other anomalies depending on what your 404 contains. I'm sure Safari is aware, but I'll check to be sure it's reported tomorrow.