I have some images which are links. The images have boarders that should show up as the link colors. I'm using CSS to change the link colors according to hover, active, etc.
This is all fine, however IE does not render the link colors (the boarders) correctly around the images. IE does render the text link colors correctly.
Firefox does it all correctly, of course.
This is the page in question (<!-- m --><a class="postlink" href="http://www.deadhookersbridgeclub.com/merch.html">http://www.deadhookersbridgeclub.com/merch.html</a><!-- m -->). The images I'm concerned about are the shirt preview links.
Any ideas?
==
Also, is it possible to implement the changing link images on top without javascript?Originally posted by smilinggoat
...
Also, is it possible to implement the changing link images on top without javascript?
I'm thinking that if you made the text portion of the graphics transparent, then you could change the background color with the :hover pseudo-class.Ok I see what you mean.
Just a few things first...
*Your missing your open <html> tag;
*should be <style type="text/css">;
*change all the text (except in the DOCTYPE statement of course) to lowercase, even in the hex colours;
And Finally ive added a new style specifically for the images, then include each image in a div tag. Plus if you wanted to be really good, add your alt & longdesc for the images.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title>Page Title</title>
<style type="text/css">
a:link {color:#f8f8f8}
a:visited {color:#000000;}
a:hover {color:#920000}
a:active {color:#ff0000;}
.pic a:link {border:4px solid #f8f8f8;}
.pic a:visited {border:4px solid #000000;}
.pic a:hover {border:4px solid #920000;}
.pic a:visited {border:4px solid #ff0000;}
</style>
</head>
<body>
<!-- The rest of your page here -->
<tr>
<td><div class="pic"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://umsis.miami.edu/~rhaig/dhbc/merch/gray.jpg"><img src="http://umsis.miami.edu/~rhaig/dhbc/merch/graythumb.jpg" width=217 height=324></a></div></td>
<!-- and continue with rest of pics and table etc -->dunno if you're still wondering how to change those image link borders, but I see your page still is using the ugly blue purple default borders...
I came across your post while looking for almost the same thing.
The short answer is these two lines of css took care of it for me:
A:link img, A:visited img {border-color: #000;}
A:hover img {border-color: #f00;}
These make a black border, except while hovering, then it is red. Modify to suit.
The long answer is that mine was an image and some text inside a class and a link...
<div class=...><a href=http://www.webdeveloper.com/forum/archive/index.php/...> <img...>some text </a></div>
Firefox was showing the custom colors for both, IE was showing the text correctly but the image border colors at default. Adding the above two lines of css took care of it in both browsers.
This is all fine, however IE does not render the link colors (the boarders) correctly around the images. IE does render the text link colors correctly.
Firefox does it all correctly, of course.
This is the page in question (<!-- m --><a class="postlink" href="http://www.deadhookersbridgeclub.com/merch.html">http://www.deadhookersbridgeclub.com/merch.html</a><!-- m -->). The images I'm concerned about are the shirt preview links.
Any ideas?
==
Also, is it possible to implement the changing link images on top without javascript?Originally posted by smilinggoat
...
Also, is it possible to implement the changing link images on top without javascript?
I'm thinking that if you made the text portion of the graphics transparent, then you could change the background color with the :hover pseudo-class.Ok I see what you mean.
Just a few things first...
*Your missing your open <html> tag;
*should be <style type="text/css">;
*change all the text (except in the DOCTYPE statement of course) to lowercase, even in the hex colours;
And Finally ive added a new style specifically for the images, then include each image in a div tag. Plus if you wanted to be really good, add your alt & longdesc for the images.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title>Page Title</title>
<style type="text/css">
a:link {color:#f8f8f8}
a:visited {color:#000000;}
a:hover {color:#920000}
a:active {color:#ff0000;}
.pic a:link {border:4px solid #f8f8f8;}
.pic a:visited {border:4px solid #000000;}
.pic a:hover {border:4px solid #920000;}
.pic a:visited {border:4px solid #ff0000;}
</style>
</head>
<body>
<!-- The rest of your page here -->
<tr>
<td><div class="pic"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://umsis.miami.edu/~rhaig/dhbc/merch/gray.jpg"><img src="http://umsis.miami.edu/~rhaig/dhbc/merch/graythumb.jpg" width=217 height=324></a></div></td>
<!-- and continue with rest of pics and table etc -->dunno if you're still wondering how to change those image link borders, but I see your page still is using the ugly blue purple default borders...
I came across your post while looking for almost the same thing.
The short answer is these two lines of css took care of it for me:
A:link img, A:visited img {border-color: #000;}
A:hover img {border-color: #f00;}
These make a black border, except while hovering, then it is red. Modify to suit.
The long answer is that mine was an image and some text inside a class and a link...
<div class=...><a href=http://www.webdeveloper.com/forum/archive/index.php/...> <img...>some text </a></div>
Firefox was showing the custom colors for both, IE was showing the text correctly but the image border colors at default. Adding the above two lines of css took care of it in both browsers.