Pages

Friday, October 3, 2008

Safari and Chrome "Red link" CSS bug

Came across a rather obscure CSS bug recently.

All the hyperlinks in the page were coming out red, regardless of the settings in the stylesheets. It was possible to change other properties, such as the background colour, but the text was always red in Safari and Chrome. IE7 and Firefox 3 showed the text as expected. It was like there was something overriding the defined styles.

Turns out the page in question had a CSS link in the HEAD tag to a file that didn't exist. The 404 page coming from IIS included styles to set the text to red. Somehow Safari and Chrome were using the styles defined in the 404 page as the CSS to be included. As the missing CSS file was the last in the list it was replacing the hyperlink colour.

Found another description of the problem here: CSS Advisor - Safari displays red links

3 comments:

  1. great find -- just the solution I was looking for. Thanks!

    ReplyDelete
  2. I knew it had to be something stupid like this. I was using one link to my css file to view my code correctly in dreamweaver and another link to the same file so the browser would parse the code correctly for the end user. That's the end of that I guess. I guess I'll have to do something different. Any ideas?

    ReplyDelete
  3. I'm not 100% sure why you need a different CSS file for Dreamweaver. At a guess you might be using fully qualified paths to get to the CSS and these differ between Dreamweaver and your browser. Perhaps you could try a single relative path that resolves to the CSS file for both?

    ReplyDelete