Hello

I am trying to make images as links - giving them a border that changes on rollover. However, I can't get this to work in IE6/Win. If you can help it would be much appreciated.


My CSS is

a img {
padding: 4px;
border: 1px solid #D9E0E6;
border-bottom-color: #C8CDD2;
border-right-color: #C8CDD2;
background: #fff;
}

a:hover img {
padding: 0;
border: 5px solid #C6C6C6;
}

my html is

<a href="#"><img src="paul.jpg" alt="new" width="260" height="102" border="0" /></a>

Afraid it didn't work. Thanks for trying though.

Hi

A working example:

http://www.henawi.com/images-as-links.html :)

hmm

Can you give me a link to your page?

I need to see your source, the css code should work in IE5 and IE5.5.

I can't realy test it in IE5/win :)

Change this:
a.image, img.pics, div.image img, img.border{

To:
a.image, img.image, div.image img, img.border{

Hi everyone

I reached a conclusion although not 100% sorted I am pretty pleased as I can get the website finished in good time. With the help of benjitastic and sam I got the rollover working in IE6/win but then experienced problems in IE5/win. I have been through many different scenarios (my brain really hurts!) but with the following code I have made the rollovers work in IE6/win. In IE5/win I have removed the padded rollover which is a little disappointing but it is functional (without removing it - the images had no padding on the 'a' state and then the padding went inside the image area on the 'hover' state). I have used the Simplified Box Model Hack . Here goes..

a img {
display: block;
margin: 15px 0;
padding: 4px;
border: 1px solid #D9E0E6;
border-bottom-color: #C8CDD2;
border-right-color: #C8CDD2;
background: #FFF;
}

a:hover img {
\padding: 4px ;
p\adding: 0;
border: 1px solid #C6C6C6;
background: #C6C6C6;
}

Thanks to everyone for their help.