Hi there I have a CSS browser compatibility problem.
I want to make an image act just like a text link, as in the border appears around the image when the cursor hovers over it. Someone kindly gave me a
solution using CSS which works on Netscape, Opera and Firefox but doesnt work on Internet Explorer I found out later. The text links work as planned in all browsers. If I use CSS then obviously any changes to link colours will be the same as the text colours so a rollover wouldnt be any use.
The web page can be found at <!-- w --><a class="postlink" href="http://www.thenewdisciples.co.uk/housered">www.thenewdisciples.co.uk/housered</a><!-- w -->
Any suggestions/ideas would be most welcome.
Thanks in advance
Mike
(see below for code)
The code I have used in the style sheet (houseredStyle.css) is:
/* turn off borders on all linked images */
a > img {
border: solid 2px #CCCC99; /* this colour is the background colour */
}
/* display border on hover */
a:hover > img {
padding: 0;
border: solid 2px
}
and also
a:link {color: #CC0000;}
a:visited {color: #996600;}
a:active {color: #FF0000;}
a:hover {text-decoration: underline;}
The code itself within the HTML (index.htm) is as normal ie:
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/1Sax.jpg" alt="About Us" width="58" height="58" border="0" align="left">/* turn off borders on all linked images */
a img {
border: solid 2px #CCCC99; /* this colour is the background colour */
}
/* display border on hover */
a:hover img {
padding: 0;
border: solid 2px
}
/* Link colors */
a:link {color: #CC0000;}
a:visited {color: #996600;}
a:active {color: #FF0000;}
a:hover {text-decoration: underline;}
IE-Win doesn't support the child selector ">" but does support the descendant selector " ".Hi Toicontien thanks for your suggestion much appreciated.
I tried it but there was no change. It still works in Firefox but not IE.
Any other ideas?Read this. (<!-- m --><a class="postlink" href="http://forums.devshed.com/t175968/s.html">http://forums.devshed.com/t175968/s.html</a><!-- m -->)Hey Kravvitz, looks like exactly the same problem. I will try it out. Thanks very much indeed. Mike
I want to make an image act just like a text link, as in the border appears around the image when the cursor hovers over it. Someone kindly gave me a
solution using CSS which works on Netscape, Opera and Firefox but doesnt work on Internet Explorer I found out later. The text links work as planned in all browsers. If I use CSS then obviously any changes to link colours will be the same as the text colours so a rollover wouldnt be any use.
The web page can be found at <!-- w --><a class="postlink" href="http://www.thenewdisciples.co.uk/housered">www.thenewdisciples.co.uk/housered</a><!-- w -->
Any suggestions/ideas would be most welcome.
Thanks in advance
Mike
(see below for code)
The code I have used in the style sheet (houseredStyle.css) is:
/* turn off borders on all linked images */
a > img {
border: solid 2px #CCCC99; /* this colour is the background colour */
}
/* display border on hover */
a:hover > img {
padding: 0;
border: solid 2px
}
and also
a:link {color: #CC0000;}
a:visited {color: #996600;}
a:active {color: #FF0000;}
a:hover {text-decoration: underline;}
The code itself within the HTML (index.htm) is as normal ie:
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/1Sax.jpg" alt="About Us" width="58" height="58" border="0" align="left">/* turn off borders on all linked images */
a img {
border: solid 2px #CCCC99; /* this colour is the background colour */
}
/* display border on hover */
a:hover img {
padding: 0;
border: solid 2px
}
/* Link colors */
a:link {color: #CC0000;}
a:visited {color: #996600;}
a:active {color: #FF0000;}
a:hover {text-decoration: underline;}
IE-Win doesn't support the child selector ">" but does support the descendant selector " ".Hi Toicontien thanks for your suggestion much appreciated.
I tried it but there was no change. It still works in Firefox but not IE.
Any other ideas?Read this. (<!-- m --><a class="postlink" href="http://forums.devshed.com/t175968/s.html">http://forums.devshed.com/t175968/s.html</a><!-- m -->)Hey Kravvitz, looks like exactly the same problem. I will try it out. Thanks very much indeed. Mike