The Obligatory Blog

Wrong Doc Type

I spent a ridiculous amount of time this morning debugging a problem on this web page.

There's 2 jQuery effects happening on the page. A Zoom effect when you hover over the image on the right. And a lightbox effect when you click on a thumbnail at the bottom of the page.

I got the hover effect working easily enough, and have the lighbox effect working on the gallery pages on this site, so thought it would be easy to set up too.

My first problem: Lightbox didn't work on the same page as the Hover effect, some kind of coding clash. Changed the version of jQuesry being used from 1.3.2, to 1.4.1 and it worked in Firefox & Safari.

In IE, it was a complete disaster. Lightbox was running - the larger image view would pop-up, but it was being forced right to the top of the page, shoving all the content out below it and just generally making a mess of the page.

I debugged everything, disabled bits of javascript, css pages. Until I had a page that only had a single image with the lightbox script (copied from a site where it's working faultlessly).

Still broken! At this point I was so confused as to the cause there was no way I was giving up!

So I stripped down the web page I already had working with Lightbox and added in the images I wanted to use from the other site. So far so good ... but as I added content back from the new page, things kept screwing it up again.

Eventually I realised it was the Doctype. The site I was adding the new page to is really quite old (maybe 6+ years) and is a coding nightmare. It uses a 4.0 transitional doctype. Changing this to HTML 5 or XHTML sorted out all my problems. Phew!

Something I'll not be forgetting in a hurry.

Posted by John Cowen - a web designer in Exeter working under the name Mekonta. If you liked this article, subscribe.