PDA

View Full Version : a:hover or/and a:focus ie 6.0



dantra
Jan 15th, 2007, 02:51 PM
I'm trying to get the a:hover in ie to work but can't seem to get it.
I've even tried a:focus but that didn't work either.
What am I doing wrong? It works just fine in firefox and opera.

here is my css


.thumbs{
border:0;
padding:0;
margin-left:15px;
}

ul.thumbs li{
list-style-type: none;
display: inline;
float: left;
}
.thumbs a img{
height: 30px;
margin-top: 1px;
margin-right:1px;
margin-bottom:1px;
margin-left:1px;
width: 30px;
border: 2px solid #B8C6D5;
padding: 0px;
float: left;
}

.thumbs a:hover img:hover {
position: relative;
background-color: #b8c6d5;
border: 2px solid #334257;
}


.thumbs a:focus, a:active {
position: relative;
background-color: #b8c6d5;
border: 2px solid #334257;
z-index:1;
}

ronaldb66
Jan 15th, 2007, 04:07 PM
The hover pseudo-class is only supported on the a element by IE < 7.0, not any other element; the img:hover is probably what causes it to fail. Try and remove that one.
You could also add hover support on arbitrary elements using one of the Sons of Suckerfish (http://www.htmldog.com/articles/suckerfish/) techniques, but since the image is a child of the a you should be able to avoid it.

dantra
Jan 15th, 2007, 09:12 PM
Thanks ronald, however it would be great to get it to work strictly using css.

_Aerospace_Eng_
Jan 15th, 2007, 09:26 PM
Well it can but I think its a little overkill and technically its not valid coding.
http://www.cssplay.co.uk/menus/dd_valid.html

dantra
Jan 15th, 2007, 10:01 PM
Hey Areo, point taken pardon my ignorance. I'm just looking for a way of getting this done with the least amount of hassle. I thought using javascript would clutter things. Again, I just didn't know.
I'll follow ronald's suggestion.

As always, I thank you guys for your help.

dantra
Jan 16th, 2007, 12:06 AM
Here is an example of what I was talking about. here (http://dennisbloete.de/)
When you hover over the image, the border changes color. That is what I am trying to accomplish.

I looked at the code but still can't get it to work.:confused:

_Aerospace_Eng_
Jan 16th, 2007, 01:51 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
a.thumb {
color:#000;
background:#FFF;
}
a.thumb:hover {
background:none;
}
a.thumb img {
border:0;
background:#FFF;
padding:2px;
}
a.thumb:hover img {
background:#334257;
}
</style>
</head>
<body>
<a href="#" class="thumb"><img src="http://img403.imageshack.us/img403/4678/subwaychickenkickenle9.png" width="173" height="133" alt=""></a>
</body>
</html>

dantra
Jan 16th, 2007, 03:56 AM
Aero you are freaking amazing!!!!! :thumbsup:

It works just fine and I did some tweaking to have it better suit my needs.
Thanks again!:cool:
I just wanted to add that it validates!!!!