Safari Bug – Red Links Galore!

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.

The Backstory

This site is using the new version of Nifty Corners (Nifty Corners Cube). It's a simple little javascript solution to rounded corners. You write the CSS selectors for the various elements, add a bit of javascript in the head of the document, and you have rounded corners. If javascript is disabled, you have square corners. Graceful degradation.

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!?

The Search

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.

The Solution

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?

And then the light bulb came on. Sunuvagun! I opened the niftycube.js file and, sure enough, there was the code. The javascript was pulling the CSS file into the document and had defined it in the root of the site. The old version of Nifty Corners required you to place a link in the head to the Nifty CSS document. But evidently, the new one does not. This is what happens when site development takes so long that a newer version of the technology you're using comes out and you have adapt to a changed way of implementing it. I changed the link in the javascript to the proper directory, removed the CSS link in the head, and like magic – blue links!

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.
• If you're using the new Nifty Corners Cube, you don't need to add a link to the CSS file like you did for the older Nifty Corners. But make sure that the link in the javascript is using the proper path to your file.
• 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.