CSS Hover: Border and Background Colours

[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.

[Nicole]

Have you tried playing around with putting the styles on just #main a:link instead of #main a:link img?

I tested it and if I keep img out of it, the border appears like it should in IE and still works in firefox.

[chicgeek]

Wonderful! I have no idea why that worked, but thank you for your help and experimentation. Here's the result - I didn't check on Opera nor the Mac browsers, but I'm not too concerned about those.

Thanks again.

[Nicole]

NP. Glad it worked for ya