If you’re using the Lightbox 2 javascript library and you’re finding that your images aren’t showing up in the visible area of the window – instead showing up below the portion of the page you’re viewing – then the problem might be that you haven’t declared a DOCTYPE.

I realized this after trying to add some cool “web 2.0” (*Buzzword – LOL*) features to web 1.0 HTML page. As the page got longer and longer, the lightbox images kept showing up further and further out of position when the lightbox opened. After futzing around with it for a few minutes, I found a cryptic tip that suggested a missing doctype declaration was the problem.

I added a basic I-don’t-care-about-web-standards-cause-it’s-after-10pm doctype —

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “”>

and the problem went away.

So, remember kids to set your DOCTYPES. It’s not just for browsers…

Suggested Links:

Google Javascript Libraries API: You can use Google’s CDN to serve prototype.js and scriptaculous.js with load and builder for free – all you need to do is register your URI. This will reduce bandwidth requirements on your server, and more importantly, reduce load times.

Learn more about DOCTYPE declarations