Just a quick note for anyone else who may run into this problem. I recently had someone contact me at E.Webscapes looking to hire me to troubleshoot and fix a problem they were having with the display of their custom theme on their site. I wasn’t the original designer of the theme, but the person who contacted me said that the original designer didn’t know how to fix the problem.

The problem? The site displayed fine in Internet Explorer, FireFox, Safari, Opera and Netscape. I say it displayed fine in Internet Explorer… on a PC. But, in Internet Explorer on a Mac? No dice. The issue is – none of the images displayed on their site. I don’t mean images they uploaded in their posts – - I mean the theme images; like the background image, header image, etc….from their stylesheet.

I took a quick look at the first line of their CSS:

body {font-size: 100%; font-family: 'Lucida Sans', Verdana, Tahoma, 'Trebuchet MS', arial, sans-serif; margin:0; background-color: #fff; background-image: url('images/bg.jpg'); background-repeat: repeat-x; background-position: top left;}

The problem? It’s the quotes around the call to the image:

... background-image: url('images/bg.jpg');...

Remove the quotes and you’ll be fine in Internet Explorer on a Mac.

Image calls in CSS do not need quotes…. double quotes or single quotes – - they’re unecessary and you don’t need them. IE Mac will not like it (I *think* this is an IE5 Mac thing.. but to be sure, just leave out the quotes and you’ll be safe).

I could have charged this person my regular hourly fee and gone in and removed the quotes from every image call in their stylesheet. Seeing as how I’m too nice for that – - I just emailed them and told them what to do. Within the hour, I got an email back with their thanks and undying gratitude. Works for me!

Since I’m in a sharing kind of mood – I figured I’d take advantage of the nice mood and share it here with you. Catch me in another hour and I might be all cranky again.