Skip to: Site menu | Main content

Email Facebook LinkedIn Twitter Google

Blog...

Safari CSS Precedence

I stumbled onto an odd problem yesterday. I decided to test this site using Safari. I don't use my Mac very often, but I like to write my code so that it's as cross-browser as possible. In Safari there were several graphical issues that I couldn't abide. So I set down and adjusted my style sheets and HTML until the site looked good in Safari too. I tested the site in Safari using my local development machine (i.e. http://192.168.1.101). I uploaded my changes to the production server. However, my style sheet changes did not take effect on the remote server. After a lot of cache clearing, DNS flushing, and code checking I was stumped. I began to suspect that there was a MIME type issue on the remote server. After more investigating with no luck I was about to give up. Then I noticed that I had two tags with a media attributes of "screen". I removed one and immediately the site worked in Safari. I still don't know why it only affected Safari. It also doesn't explain why it worked when browsing my local development machine.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)