Well yesterday I finally was satisfied enough with the updated version of my site to upload. Of course, the result was not the nice and easy transfer that I was expecting since I decided to transfer my site to using WordPress as a CMS. All archived blog images broke, none of my links transferred, permalinks weren’t working; it was just an irritating time sink.
Obviously there is still work to do, such as adding my portfolio pieces, but what became most irritating was the fact that Safari was ignoring font-family, background, well generally everything on the body styling, when it appeared quite fine in Firefox, and Opera.
I spent the morning searching for a solution. I could find nothing about Safari ignoring font-family, which for me was the more important issue. I should have considered that the problem stemmed from the fact that all body styles were being neglected.
After a little experimentation, I found the root of the problem. WordPress’ theme information in style.css.
Originally utilized as such:
/*
Theme Name: Little Bird Upgrade
Theme URI: http://samanthaarmacost.com
Description: A custom theme for my personal and professional design website
Version: 1.0
Author: Samantha Armacost
Author URI: http://samanthaarmacost.com
Tags: outdoors, green, sky, grass, bird
*/
@charset "UTF-8";
/* CSS Document */
The order must be changed to have @charset "UTF-8"; first, as such:
@charset "UTF-8";
/* CSS Document */
/*
Theme Name: Little Bird Upgrade
Theme URI: http://samanthaarmacost.com
Description: A custom theme for my personal and professional design website
Version: 1.0
Author: Samantha Armacost
Author URI: http://samanthaarmacost.com
Tags: outdoors, green, sky, grass, bird
*/
I hope that helps some of you out there in your cross browser testing. I also highly recommend using browsershots.org for checking out what your sites look like in a variety of browser/OS configurations.
Tags: CMS, crossbrowser, CSS, design, LinkedIn, Web, wordpress