The Gaming Lounge

It’s a funny thing, web design. With recent sites I’ve developed I’ve moved to using CSS and endeavoring to build standards compliant sites. yet recently a site I built, that had validated as compliant was not rendering correctly in Safari.

It tested OK in obscure old versions of IE, it tested OK in Opera and Firefox. but my customer used Safari, and she was never seeing the website as intended. So I went researching, trying to find mention of this elusive bug that may be causing Safari, and Safari alone to disregard my CSS. Yet I was finding the opposite, Safari is compliant, Safari renders pages to standards and so on. So I was stumped.

Not having a Mac to test on didn’t help, and I sidelined the project for a while. Then today, knowing I needed to resolve it, I waded in again. I read countless pages on DocTypes and web standards, nothing. Out of obstinacy I ran the page through a XHTML validation; passed. I then ran it through a CSS validator…. and it failed. This page I had carefully constructed to be compliant, and which was working happily in every browser but Safari was not CSS compliant! What had I missed?

It turns out, after originally validating my code I had gone through the style sheet and added comments. Yes, that’s right, in my mind I hadn’t changed the code at all, I’d simply commented it for future reference. It was the comments which broke it. I’d used the old ‘standard’ of a double forward slash. “//” and thought nothing more of it. Yet the validator was showing every commented line as having a parsing error. On a hunch, I changed all the comments to enclosed comments with a /* and a */ at the end. I rang a friend with a Mac, “Can you check this page out for me” and behold he sent through a screenshot of the page rendered as intended,

A few comments had tripped up my CSS and left me wondering what had gone wrong for a long time. Lesson learnt.