The Gaming Lounge

Tripping up in CSS

Friday, April 27th, 2007

It’s a funny thing, web design. With recent sites I’ve developed I’ve moved to using CSS and endevouring 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 toda, 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 ten 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 teh 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. Ona hunch, I changed all the comments to eclosed 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.



No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment

You must be logged in to post a comment.