[chicgeek]

Desired situation: linked image, padding showing coloured background and border. On hover, the background and border will alter colour.

I've been playing with a piece of code, trying to get the effect to work properly in IE.

<div id="main">
<a href="#"><img src="../images/grass.gif" border="0" class="highlight" /></a>
</div>

#main a:link img, #main a:active img, #main a:visited img {
	position: relative;
	float: left;
	padding: 5px;
	background-color: #CAB08A;
	border: solid 1px #593524;
	margin: 0 10px 10px 0;
}
#main a:hover img {
	background-color: #6B947C;
	border: solid 1px #095959;
}

The :hover applies only to a, as it should. The above code is pristine in FF and Dreamweaver. IE shows the colour change for a height of 10px (twice the padding, as if the image has no height), or not at all if I have more than one of the images occur successively.

Weird, huh? Suggestions welcome.