Forum Moderators: open
#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?
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