IE :focus problem

[kewlkruse]

I've been working on an image gallery that uses CSS and the :focus feature of CSS to load different images.

The page works great in Firefox, but when it comes to IE6 it doesn't do anything when you click the thumbnails. I can change the :focus to :hover and it'll work fine in IE, but the client prefers the onClick type of event. Is their anything I can do for this? I'm relatively new at fixing IE glitches.

Here's the section of CSS that handles the :focus attribute

/* change the thumbnail border color */
#container a.gallery:focus {
border:1px solid #fff;
}

/* styling the :hover span */
#container a.gallery:focus span {
position:absolute;
width:352px;
height:265px;
top:36px;
left:6px;
}

#container {
background-image: url(../galleryimg/curved/keypark1.jpg);
background-repeat: no-repeat;
background-position: 6px 36px;
}

#container a.gallery:focus img {
border:1px solid #6d6151;
float:left;
margin-right:5px;
}

[edited by: Robin_reala at 5:24 pm (utc) on July 18, 2007]
[edit reason] Removing URL as per TOS #13 [webmasterworld.com] [/edit]

[Robin_reala]

Yep, there's a fundamental problem here that IE doesn't support :focus :) However you can simulate it with :active, so try doubling up your selectors.