How to get IE6 to apply image border styles on hover (mouseover)?

← 1 | 2 | 3 →

Every now and then, someone pops up in a newsgroup, asking why the borders on linked images won't change colour on hover in Internet Explorer 6, despite setting explicit styles for them.

The problem they experience, is demonstrated here:

As you can see when looking at this example in Internet Explorer 6 (or 5)[1], the border remains green and solid when hovering over it with the mouse, while in other browsers, it will change to red and dashed.

The HTML code is plain and simple: 

	<a href="#"><img src="images/poppy.jpg"
	alt="" width="100" height="100"></a>

The CSS style rules are straightforward enough: 

	a:link img,
	a:visited img{
		border:5px solid green;
	}
	a:focus img,
	a:hover img,
	a:active img{
		border:5px dashed red;
	}

So why don't they get applied, and what can be done about it?

Here's the solution: get IE6 to apply image border styles on hover.

Note: a:active does in IE, what a:focus does in other browsers, which is why I use them both. You can see that those styles are actually applied in IE, when you use your TAB key to jump from link to link and give them focus. It's just the hover state that is being ignored.

[1] Internet Explorer 5 has the same problem, and can use the same solution, as IE6. This bug was solved in IE7's beta version.