The missing image

I was remembering a strange problem from a few years ago and thought I would share the issue.

We had a simple web page around the year 2002 which contained either a plus or a minus image, not unlike these:

The problem we had was that regardless of the code we used, we could only ever see the minus image. Checking the page source and viewing the image on its own told us that we should be seeing the plus image where appropriate, and yet on the page itself we only ever saw the minus image.

How does your browser scale images?

It turns out that actual images were 11 pixels wide and 11 pixels high, but the image tag was telling the page to display as 10 pixels wide. I’ll show you what that looks like in today’s browsers, but your mileage may vary:

Hopefully you saw something like this:

If you’re unlucky you’ll see something like this:

Depending on the scaling algorithm used by your browser, scaling from width 11 to width 10 may just remove the middle line, making a plus look like a minus. Problem solved. I didn’t pick it and I’m sad to say that it took too long to pick up the issue.