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