Strange Purple Line

Alright, I've got a really strange problem going on. I've recently redesigned my weblog to be more standards-compliant, and I've copied the modifed Fahrner Image Replacement technique that Zeldman is using on his site. You can see on his site that the H1 is shoved off-page with a negative text-indent, and the background is applied to the A tag inside the H1, which allows the header image to still be "clickable." I was able to successfully duplicate this behavior using the following code.



Now, that is the same code that Zeldman uses, and it works fine in all the modern browsers I've tested in except one: In Mozilla Firefox on XP, I get a strange purple line extending from the header image offscreen. This is clearly the link outline or underline, since if I click on the header image, the purple turns red, and it's extending towards where the H1 text has been shoved offscreen.

My problem is that this doesn't happen on Zeldman's site, and for the life of me, I can't see what the difference is. Hell, we're even using the same doctype, and we're both importing our stylesheets. But I get this weird line, and he doesn't.

Note also that the line doesn't show up in any other browser I've tested, even Firefox on my Mac.

Any suggestions are welcome!

try to add, text-decoration:none;

Why are you using the negative indent?

W00t! Thank you! That did the trick perfectly. I feel kind of silly for not seeing it. Of course, that also proved to be the difference between Zeldman's design and mine: He had declared text-decoration: none for all his links elsewhere in his stylesheet. When I added that line to my h1 a rule, it worked flawlessly.

Reference: If you've never heard of Fahrner Image Replacement, check out the A List Apart article about it.

The problem with FIR is that it causes screen readers to not see the header. Mike Rundle discovered a fix, which is to use negative text indent to move the text off-screen, but leave it as part of the document. Screen readers are happy, and my design is happy.

Here's the writeup by Mike Rundle explaining why it works. Zeldman also uses this technique on his latest home page design, and I figure if it's good enough for Zeldman, it's good enough for me.

Wouldn't just adding title="Space Ninja Blog" to the h1 accomplish the same thing?