Accessibility

CSS Advisor

Safari displays red links

by stefsull on January 3, 2007
Edited by: Cookbook_adm on September 11, 2010
Avg Rating 4.6 (9)   |   Log in to rate post.

Tagged with link , red , Safari 2.0 , anchor , Text , Color

Problem

Defined link styles for your page display properly in all browsers but appear red in Safari.

Solution

Check CSS files, linked or imported into your X/HTML document, for 404 errors (page not found). Safari will render the X/HTML 404 page as if it is a CSS document. Thus, if the 404 document has CSS styles defined in the head, it may override your defined link styles.

Detailed description

When checking your page in various browsers, you may find Safari displaying a bright red text color for your page anchors (links), overriding the colors you've specified in your CSS selectors.

First, look for a CSS document that may not be uploaded to your server. It will be returning a 404 (page not found) error. The simplest way to do this is to use the Web Developer's Toolbar extension for Firefox (by Chris Pederick) and simply click on the CSS > View CSS menu item. The page that appears will actually render the 404 error page code (if it exists) among the other linked and imported CSS documents. This method is effective because it pulls in any CSS documents related to your page -- even if they're brought in through a Javascript file.

Once you locate the document returning the 404 error, you can upload that CSS file to the server and your red links will disappear.

Theory is that Safari is erroneously rendering the 404 document (since it's being returned in place of  a CSS file) as a CSS document. And thus, the red link selectors in the head of the error document are overriding your own selectors.

Note: This problem only exists on certain servers since 404 error documents will differ slightly. If you create a custom 404 page for your site, it's likely you'll never see this problem (or may see something entirely different).






Tagged with link , red , Safari 2.0 , anchor , Text , Color

Tag it on del.icio.us or Digg

Text ID: SAFARI_DISPLAYS_RED_LINKS



Comments (6)

To add a comment, please Log in.




!important

This might be useful:
add the !important bit to the color and safari will read that instead of any other css (404 page)

ie
a { color: #fff !important; }

Thanks a lot. It helped me very much.

En sisya araama.

Thanks

I was ready to give up on this problem but this really helped. Thank you!

Uploading CSS files to server?

So how do you upload the CSS files to the server?

Opera has this same problem

I found some version of Opera has this same problem.
I change the css as follows:
body a:link, body a:visited { color: #06c; text-decoration: none; }
body a:hover, body a:active { color: #09f; }
it can  also solve this problem.

problem solved

Thanks for the tip. With the Firefox developer toolbar, this was quite easy to do and solved the problem.





CSS Advisor home
Submit a post

rss

CSS ADVISOR RSS FEEDS
Recent: POSTS | COMMENTS | EDITS


Browsers
Internet Explorer (103)
Mozilla/Firefox (52)
Opera (18)
Safari (38)
CSS Properties
Background (25)
Border (10)
Color (10)
Float (23)
Font (6)
Margin (11)
Padding (9)
Position (40)
Text (30)
Width/Height (27)