Behavior of Image ALT Attribute in IE/Fire Fox

When browsing the web, you will often notice that a tool tip displays when you mouse over certain images as shown in the image below:

Being mostly a Microsoft IE user, I assumed that the text for this tool tip was specified in the image's alt attribute, as below:

<img src="name.gif" alt="Modeling Article">

I had noticed that the tool tips didn't work in Fire Fox, but didn't pay too much attention. As I had a case where it actually mattered recently, I did some research and learned something interesting. The alt attribute is not supposed to work that way according to the official specs. IE just made it do that. Fire Fox followed the spec and did not.

The official purpose of the alt attribute is to provide alternate text in case the image doesn't load or cannot be viewed, as shown below:

The correct way to provide a tool tip, according to the specs, is with the title attribute:

<img src="name.gif" alt="Modeling Article" title="Modeling Article">

That works as expected in Fire Fox.

Of course, you want both attributes in there because search engine's make a lot of use of the alt attribute and apparently they are meant to serve two different purposes.

Always more interesting stuff to learn...

Cross-Browser Testing Made Easy

One of the challenges of building a web site is ensuring that it will function the same way when viewed by many different web browsers and versions of browsers on different operating systems. Something that works fine in the latest version of IE or FireFox may not work the same way (or at all) in an older browser or on a different O/S. This is not as much of an issue if you are just using very vanilla HTML. However, if you start using JavaScript, DHTML, or some of the more exotic CSS, you may be in for a nasty surprise when you try to view the page on a different system.

What really got me thinking about this recently was my interest in weaning myself away from table-based design in favor of more CSS-driven design. I know it's supposed to be so much better, the wave of the future and all that. But my concern has always been how to be sure it would work on older browsers.

I try to keep the latest versions of IE, FireFox, NS Navigator, Opera and now Google Chrome on my local machine for some basic cross-browser testing. But I can't have the other versions or the other O/S configurations to test. I don't even own a Mac at present.

I started thinking it would be cool if there was a software tool out there that would grab a page and render it just like a specified browser, version of browser, etc.

As it happens, I found something even better. This web site (http://www.crossbrowsertesting.com/) allows you to log into any of their many and varied images to test your page. It's free, with some restrictions that I'll get to in a bit. But you can hop on to a Mac, Ubuntu or Windows (98, XP, Vista, etc.) system and try out many different browsers, versions of browsers, etc. It's brilliant. It's not some kind of program that mimics the browser. It's the actual browser. And it's fully functional so you can test all your JavaScript, DHTML, whatever.

There are a few restrictions on the "free" part. You can only stay logged into a session for 5 minutes at a time. But you can launch as many sessions as you like. So for quick tests, it is perfectly adequate. Also, paying customers get preference for access when the site gets busy. If you need to do more complex testing and need more than 5 minutes on an image, you can buy little blocks of time. It's all very well thought-out.

Now, if they could just do something similar to test wireless devices...