CSS Image Rollovers

[collymellon]

Wondered if anyone could help me..

I have 3 Css rollovers, upon site load these appear fine and the images swap fine when you rollover..

Then click one of them and it disapeers into a little line instead of the correct image. The same happens if you go to a different page on the site with the same rollovers. Heres the code:

HTML

<div id="icons">
<a href="#" class="safe">&nbsp;</a></a>
<a href="#" class="ssai">&nbsp;</a></a>
<a href="#" class="adt">&nbsp;</a></a>
</div>

CSS

.safe:link, .imglink:visited, .imglink:active{
text-decoration: none;
background-image:url (images/safecontractor_static.jpg);
text-decoration: none;
width: 48px;
height: 42px;
background-repeat: no-repeat;
background-position: center center;
}

.safe:hover{
background-image: url(images/safecontractor_hoover.jpg);
text-decoration: none;
width: 48px;
height: 42px;
background-repeat: no-repeat;
background-position: center center;
}

.ssai:link, .imglink:visited, .imglink:active{
text-decoration: none;
background-image: url(images/ssai_static.jpg);
text-decoration: none;
width: 76px;
height: 39px;
background-repeat: no-repeat;
background-position: center center;
}

.ssai:hover{
background-image: url(images/ssai_hoover.jpg);
text-decoration: none;
width: 76px;
height: 39px;
background-repeat: no-repeat;
background-position: center center;
}

.adt:link, .imglink:visited, .imglink:active{
text-decoration: none;
background-image: url(images/adt_static.jpg);
text-decoration: none;
width: 60px;
height: 43px;
background-repeat: no-repeat;
background-position: center center;
}

.adt:hover{
background-image: url(images/adt_hoover.jpg);
text-decoration: none;
width: 60px;
height: 43px;
background-repeat: no-repeat;
background-position: center center;
}

Puzzling me for a while, any help appreciated.

[collymellon]

Anyone know the reason?, i have read through loads of post unable to come up the answer, any quick suggestions would be appreciated.

[createErrorMsg]

Your code for all three anchor classes looks like this:

.safe:link, .imglink:visited, .imglink:active
.ssai:link, .imglink:visited, .imglink:active
.adt:link, .imglink:visited, .imglink:active

my bold

Notice that all three set the .imglink:visited and .imglink:active, which isn't a class used in your html code, and that there is no :visited or :active setting for any of the class names that are used in your source.

This is looks like a cut and paste oversight (happens all the time), but is probably responsible for the problems you're having related to hover and active states.

A couple other things to note:

1) background-image:url (images/safecontractor_static.jpg); - Remove the space between url and ( or the image won't show at all.

2) Anchors are inline elements, which means compliant browsers will not apply a width or a height to them. If your page does not have a doctype, IE will apply widths and heights to inline elements, but Firefox and other compliant browsers never will, and IE will not if your page uses a doctype.

For a compliant, cross-browser solution, try setting the anchors to display:block;, then float:left;. This will get all browsers to apply your width and height settings.

cEM

[collymellon]

sorted thanks!

It was a cut a paste job yeah, but my CSS is getting that big im losing track of certain bits.

The rollovers are spot on now..