Came across this annoying little difference between Firefox and Safari today. Let’s say we have an image:

This uses the following html code:

<img src="http://www.folksonomy.org/assets/2009/11/one.jpg"
alt="one" title="one" name="one" width="300" height="144"
class="aligncenter size-full wp-image-381" />

Notice how there’s a name=”one” attribute on the image. Now, we can change the image using some text that we mouseover. Here’s an example that you can hover over:

Hover over this text

This uses the following HTML:

<strong onmouseover="one.src='http://www.folksonomy.org/assets/2009/11/two.jpg'" onmouseout="one.src='http://www.folksonomy.org/assets/2009/11/one.jpg'">
Hover over this text
</strong>

Now, the problem arises if you use id=”one” instead of name=”one”. Firefox and Safari behave differently in this case. Firefox understands which image you’re referring to, and behaves the same as if you used the name attribute, while Safari doesn’t respond at all.

Thus, if you’ve been using id to identify your elements while testing websites in Firefox, you might not know that a lot people using other browsers might not be seeing the same functionality as you.