Safari error not showing CSS and images

The Problem

I was getting strange rendering behaviour on Safari 5.1.7 for Windows 7 when viewing my website. The page basically looked like it was not showing CSS or the images. The website rendered fine in all other browsers on Windows 7 like Chrome, IE and Firefox.

Troubleshooting

So what was the problem with Safari? Initially I thought it was due to the Safari browser on Windows, and the fact that Safari was no longer being supported on Windows, but this was not that case as the error was also occurring on OSX Safari 6.0.3.

Then I tried viewing my local development site in Safari on Windows and the site rendered correctly. So the difference between my development site and the staging environment as our staging environment required a IIS username and password to view the site. Hence something was going wrong with the authentication in Safari and this caused the CSS and images to not download correctly.

The developer web inspector network tab showed 302 status codes and undefined types which in turn caused the JavaScript to break and throw console errors.

The Solution

Changing IIS fixed this issue for me.

1. Open IIS
2. Select your web site
3. Open Authentication under the IIS section
4. Make sure you only have Basic Authentication enabled and everything else is disabled

The error was due to a conflict with my Authentication settings:

Challenge-based and login redirect-based authentication cannot be used simultaneously

Hope this helps someone out there!

Visual Studio 2010 publish failing with error Unable to add XYZ to the Web site. Access is denied (550).

I started receiving this error when trying to publish through Visual Studio 2010:

Unable to add XYZ to the Web site. Access is denied (550).

The reason being someone had manually FTP-ed files to the website and they had read-only set to true.

Resolution:

Make the folders/files not read-only - easy :)

Using EMs for font size

Can you set

body

{

font-size: 62.5%

}

This means that we can use em’s

So 22px will be 2.2ems, 33px will be 3.3px, this is useful for responsive design.

Umbraco 404 custom error page not working on staging/production server

My custom 404 error page in Umbraco was working locally but not when I deployed to staging/production. The reason was explained very nicely here: StackOverflow.

So basically you can add the following to your deployed web.config under :