2 replies [Last post]
cardinal
Offline
Regular
Last seen: 14 years 27 weeks ago
Joined: 2007-04-11
Posts: 40
Points: 0

The regular links on my page and their mouse-over states can be viewed in both IE and Firefox. However, when I mouse-over links that have one of two classes tied to them, they cannot be viewed in Firefox. When moused-over, they are whited out in Firefox.

To let people know that they will be viewing either an excel or pdf document, I created two classes #content a.pdf and #content a.excel. The links that have either of these classes tied to them are having the problems (i.e. cannot be viewed when moused-over).

Can anyone please provide some insight or feedback as to why I am having this problem and how to remedy the situation? Your time and assistance are greatly appreciated. Thanks again.

Example

CSS

#content {
width:450px;
margin-left:150px;
}

#content p{
font-size:1.2em;
margin: 0px;
padding: 0px 0px 10px 0px;
line-height: 1.5em;
}

#content a, #content a:visited {
color:#C05F1D;
text-decoration:none;
}

#content a:hover {
color:#FFFFFF;
background-color:#7aa0cd;
}

#content a.pdf {
background: url(images/pdficon_small2.gif) no-repeat right center ; padding-right:20px;}

#content a.excel {
background: url(images/excel.gif) no-repeat right center ; padding-right:20px;}

HTML

Guidelines and Forms

Guidelines

Forms for Prep Users

Prep Users: Appendix One

Non-Prep Users: Appendix Two

Regular link without class that works

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 31 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

It's to do with specifity.

It's to do with specifity. The bits at the bottom that specify the background-image are overwriting the bit that says "change the background colour on :hover"

Move this:

#content a:hover { color:#FFFFFF; background-color: red; }

AFTER the classes.

Verschwindende wrote:
  • CSS doesn't make pies

cardinal
Offline
Regular
Last seen: 14 years 27 weeks ago
Joined: 2007-04-11
Posts: 40
Points: 0

Thanks Pineapple, it was a matter of specificity and order.

Consider this matter resolved. Thanks again and have a great one.