View Full Version : Image Links, Change Border color on Hover...quirky in IE??

12-04-2009, 01:12 PM
I have a page with thumbnail images, which each link to another page.

I have applied a white border to each image, and want the border to change to orange on hover.

Seems to work with a couple of browsers that I've tested with so far, but gets quirky in IE, especially after you click one of the images and then go back to the first page, suddenly the border for the "visited" thumbnail no longer works.

Here's the page:


And here's the CSS styling that I've applied to the images:

position: relative;
padding-left: 20px;

.matcontainer img {
margin: 0 6px 6px 0;

.matcontainer p {
margin-right: 50px;

.matcontainer a:link img, a:visited img, a:active img {border: 1px solid #ebebeb;}
.matcontainer a:hover img {border: 1px solid #eb6e16;}

Can anybody figure out what's going on with IE (once you click on a square and then return), and how to get around this? I'm concerned that the problem might exist with other browsers that I don't have access to, or that it's something funky with my code and not necessarily a browser problem at all. It's driving me nuts!

EDITED TO ADD: Problem seems to be in IE6, which is what I have. Just tried it on somebody else's computer who has IE7, and there's no problem. Don't have access to IE8, but still the problem is odd and frustrating.

12-04-2009, 04:24 PM
IE6 is the most despised of the whole group of despised IE browsers and has always had issues with hover.

I thought I had the answer but not. I'll check back later if no one gets to this but it has to do with the hack to make how you use hover on that image.

12-04-2009, 04:42 PM
Hello puffnstuff,
Try being more specific for each selector instead of only the link and hover.
Try this -

.matcontainer a:link img,
.matcontainer a:visited img,
.matcontainer a:active img {border: 1px solid #ebebeb;}
.matcontainer a:hover img {border: 1px solid #eb6e16;}

12-04-2009, 07:15 PM
Yup, I had it written all out like that as well, but it didn't make any difference.

12-05-2009, 03:06 AM
I was having trouble with img borders some time ago, No matter what I couldn't get IE6 to give up it's whacky ideas about what the image borders should be. That page is not online ATM and I am away from home so I can't look at the code for how I fixed it.

I know I had to use !important though, so maybe give that a try for the visited links.

12-05-2009, 01:46 PM
I know I had to use !important though, so maybe give that a try for the visited links.

ok, so I tried applying that to the visited, and it actually made things even wackier. Also tried applying it to the hover, same wacky effects. Some boxes turn orange on hover, some don't, some boxes retain their orange border even after I move the mouse away. Crazy.

12-05-2009, 02:24 PM
.matcontainer a:hover {height:1%;}
.matcontainer a:link img,.matcontainer a:visited img {border: 1px solid #ebebeb }
.matcontainer a:hover img ,.matcontainer a:active img{border: 1px solid #EB6E16 }
should fix it :thumbsup:

12-05-2009, 10:08 PM
:D That height declaration did the trick! Never would have figured that one out on my own. Thank you so much!

EDITED TO SAY: Now I'm extremely perplexed. What seemed to work yesterday, does not really work. Works better in IE, but then the hover effect does not work at all in other browsers.

So maybe I'm back to square one. I'm thinking it might be easier to just put in a declaration or conditional for those using IE6.

12-06-2009, 01:24 AM
hasLayout - http://www.satzansatz.de/cssd/onhavinglayout.html