I’ve just had one of the most frustrating hours of my life with a really odd bug on a website.

I’ve been working up sample pages on a new site I’m working on and I needed to put in a square image 250px by 250px. This shouldn’t be a problem and, indeed, everything was fine and dandy on my local computer. The problem came when I uploaded the page to the web. The image simply would not appear – the img tag containing it wouldn’t even appear in the source code (and I tried it in FF, IE6 and Opera).

In the end I tried putting different images elsewhere and then in the same spot on the page and there was no problem with any of them. In the end I took the tag containing one of the other images and changed the filename. The image appeared, at last, but was skewed because I hadn’t changed the dimensions from the other image. I changed the height and width back to 250 and, hey presto, it disappeared again!!

In the end, my initial work around has been to set the size of this particular image in the CSS for the page (it comes in a particular containing block) and leave the width and height attributes out of the HTML tag. When I have more time I’ll have to test it out a bit more thoroughly. It certainly has me completely baffled.

Technorati Tags: webdesign, bugs, weird

I recently started using the Aardvark extension for Mozilla Firefox – this is a useful little tool which, when switched on, shows you the HTML element you’re currently hovered over and any class or id applied to it. This is handy to see how pages are put together or to find out which element you should be styling in your own pages.

I was reading the article “Fixed or fluid width? Elastic!” over at Roger Johansson’s 456 Berea St this evening. I decided to switch on Aardvark to check out how the principles were being applied on his site. Curiously, it didn’t work for this website! I checked a few other blogs that I read regularly (those in my Blogroll list) and discovered that while it worked for most, it also failed to work on The Autistic Cuckoo and SideSh0w.com. Why this should be remains a mystery – does anyone have any ideas?

I’ll try and investigate further when I have time but would interested to hear thoughts or opinions about what’s going on.

Update: I figured out that, of course, Aardvark doesn’t work if the site is XHTML served correctly as “application/xhtml+xml”. I haven’t looked under hood of it yet but I suspect it relies on the JavaScript command “document.write” which doesn’t work in XHTML.