Forum Moderators: not2easy
Some linked images on my page need a white border which changes red on hover. The following code works fine in IE 6, but in other browsers only the bottom of the image has a border:
<html>
<head>
<style type="text/css">
.MyImg{border: 1px solid white;}
.MyImg:hover{border: 1px solid red;}
</style>
</head>
<body bgcolor="#000000">
<a href="1.htm" class="MyImg"><img border="0" src="image.jpg" height="100"></a>
</body>
</html>
I think the border is only showing for the portion within the line-height of the <a>, so the rest of the image gets no border, but I may be wrong.
Can anybody explain how to fix this and get a single pixel border around the whole image that changes red when hovered over? I imagine it must be simple, but it's driving me mad.
Thanks,
Mr Benn
The problem can easily be solved. First, remove border="0" from your image tag. Then, change your style sheet to this:
<style type="text/css">
.MyImg img {border: 1px solid white;}
.MyImg:hover img {border-color: red;}
</style>
Thanks very much - that works perfectly now!
Mr Benn
