So I just spent the last two hours helping a partner company with some final details on a new site that will launch soon. It was supposed to be a quick debug, a browser compatibility issue. Safari was not rendering buttons correctly and Internet Explorer was placing a yellow background in the main content area. After running some further browser compatibility tests, I figured it would be about 15 minutes per issue. The code gods were not smiling on me today.

A Typical Safari Browser Compatibility Issue?

There is a known styling issue with Safari whereby buttons and other standard functions display according to Apple and not what the designer intended. Thanks Apple for assuming that anyone couldn’t possibly put together a decent user interface and therefore you must override our styles by default! And though I would love to continue to blame Apple and Safari for this issue, an hour went by and none of the usual tricks worked. It had to be something else.

This ‘Bug’ Was Hiding Well

And though it hid well, it was very unimpressive… an orphaned ‘*’ (asterisk) in the middle of the style sheet. Most browsers skipped right over this, yet Safari tripped over it and it caused some major display issues.

First Battle Won, Now onto IE

The Internet Explorer issue turned out be very easy. The style sheet had multiple settings for background gradients but the original developer did not account for how IE would treat these styles. Did they bother testing it?

These Weren’t Browser Issues…
They Were Theme Issues

This site was a WordPress site and like many it used a customized commercial theme. However a commercial theme is only as good as the developer/designer that authored it. In this case, it was sloppy! I have run up against other WordPress commercial themes that have been poorly developed and cause problems. I guess for $55 dollars they are still a deal, but it certainly is a flaw in the system that you only learn of a commercial theme’s issues after it has been purchased.