Tue, 06 Jan 09

A Simple Utility to Generate and Preview Html on the Web

This happened a few months ago so I might be missing some of the specific details.

While at reevoo we noticed that some of the images on our pages were being collapsed when the image source couldn’t be found. Trying to force the image to retain its size by specifying the dimensions in CSS or by setting the relevant attributes on the image tag had no effect. I knew that I’d seen ‘blank’ (or broken) images in the past with specific sizes so couldn’t understand what was going on. Through a little trial and error I worked out that the collapsing of the images only occurred when a doctype was set. I probably should’ve left it there but instead proceeded to spend a couple of hours creating a little web based html editor (NOTE. this is only tested in Firefox) that allowed me to see the effects different doctypes had on the html.

You can replicate my image experiment by entering something like <img src="" width="100px" height="100px" border="1px"> in the html body textarea. When the doctype is left out (set to ‘none’) you’ll see that the image element is 100 × 100px (or whatever you’ve defined as the width and height). Changing the doctype to anything else will result in the image element being ‘collapsed’. I’m afraid I never did get as far as working out why this was the case and I’ve not had any use for the html generator since (good, huh). If anyone knows why the broken images are collapsed when a doctype is set I’d be interested to hear from you.