More options to trick IE6 into applying styles to linked images

← 1 | 2 | 3 →

Again, same image, same HTML code, same CSS styles for the image:

This time, I did not trigger the effect by giving a:hover a colour, but by using this rule instead: 

	a:hover{
		background-color:white;
	}

I could also have used text-decoration:none, or background-position:left top, or even font-weight:bold. The important thing is, that whichever style you want to use for this "IE-hover-trigger", it must be in contrast with the styles for a:link and a:visited, in order to make it work.

For example: if your link text is already bold, setting the a:hover style to font-weight:bold won't make the link styles change on hover, and thus it will not trigger the hover effect on the image either. The same is true for any other style.

Which trigger you want to use, depends on the styles that are already in place for the links. Sometimes a change of background-position is the best option (for instance when no background image is present, so there aren't any visible side effects of changing the position), sometimes a change of colour is the most convenient.

Note: Keep in mind, that the 'natural' colour for unvisited links is #0000FF, and for visited links it's #800080. To use the color property as a trigger, make sure you avoid these two colours if you haven't set other colours explicitly for a:link and a:visited. — Remember: no change, no trigger.