Forum Moderators: open

Message Too Old, No Replies

IE is not recognizing the :link pseudo-class

or an a:pseudoClass, for that matter

         

RevoltPuppy

3:54 pm on Oct 6, 2009 (gmt 0)

10+ Year Member



In my CSS, I have the following:

#map div.popup a.close{border:1px solid #000;}
#map div.popup a.close:link{width:100px; height:27px; background-image:url(close.png); background-position:top; display:block; overflow:hidden; position:absolute; bottom:10px; right:10px; text-indent:-9999px;}
#map div.popup a.close:hover{background-position:bottom;}
#map div.popup a.close:active,
#map div.popup a.close:focus{background-position:top;}

The only thing IE7 shows is the regular link style (with no pseudo-class). Any of the links with a pseudo-class are not recognized at all. They just don't show up.

In all of my reading, IE6 and up supposedly support all of the pseudo-classes, but even IE8 isn't displaying it correctly. Am I doing something wrong?

Demaestro

4:01 pm on Oct 6, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



#map div.popup .close a:link{width:100px; height:27px; background-image:url(close.png);

Does this work?

swa66

4:06 pm on Oct 6, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'd move the bulk of your settign away from the :link and onto the a.close

Do you really need that long a selector? I presume not.

So I'd try this:


#map div.popup a.close {
border:1px solid #000;
width:100px;
height:27px;
background-image:url(close.png);
background-position:top;
display:block;
overflow:hidden;
position:absolute;
bottom:10px;
right:10px;
text-indent:-9999px;
}
#map div.popup a.close:link {
/* anything you want changed on links that are not visited yet */
}
#map div.popup a.close:hover{
background-position:bottom;
}
#map div.popup a.close:active,
#map div.popup a.close:focus{
background-position:top;
}

The reason is that links that have been visited will not trigger the :link pseudo class anymore.

If you want that :link, you probably also want the :visited one, but there's no need to have both of them.

If you do add them, make sure to know that they all have the same specificity, and hence the last of them that applies will win whenever the settigns conflict.

HTH

RevoltPuppy

4:24 pm on Oct 6, 2009 (gmt 0)

10+ Year Member



swa66, brilliant. That fixed the problem.

I didn't have the :visited pseudo-class styled, so it was just displaying already-clicked links in a normal fashion.

I'm gonna go back and streamline the code, as per your recommendation, but at the very least, this works.