I'm have an odd problem since starting a new site using CS6. I have properly created CSS text link attributes the site and have found the hover attribute (in this case a simple color change) will not work when a link is made to an .html file. The color change hover works when linked any other extension and external links, but just not .html. Does anyone know what's going on? It's driving me newly crazy!

The order of how you define the styles is very important. I suggest use this order:

.TextGray15-20Reg a:link {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: 15px;

font-style: normal;

line-height: 20px;

font-weight: normal;

font-variant: normal;

text-transform: none;

color: #3E8166;

text-decoration: none;

}

.TextGray15-20Reg a:visited {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: 15px;

font-style: normal;

line-height: 20px;

font-weight: normal;

font-variant: normal;

text-transform: none;

color: #3E8166;

text-decoration: none;

}

.TextGray15-20Reg a:hover {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: 15px;

font-style: normal;

line-height: 20px;

font-weight: normal;

font-variant: normal;

text-transform: none;

text-decoration: none;

color: #1A4435;

}

.TextGray15-20Reg a:active {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: 15px;

font-style: normal;

line-height: 20px;

font-weight: normal;

font-variant: normal;

text-transform: none;

color: #3E8166;

text-decoration: none;

}

And, of course, check the color of hover to see if it is what you want.

Save the file and preview in the browser. If it doesn't work then clear the browser cache, close the browser and restart the browser. Style cache is very persistent and keeps re-using it so if you have the same name styles, it gets re-used. The idea is to reduce the band-width.

I tried the re-ordering and it didn't work, unfortunately. I'm thinking if ordering was the issue, it would have prevented all hovering not to work, not just associated links that end in ".html". I really do appreciate your time in helping, though...

The only *potential* issue with this method is that if you have any named anchors within .TextGray15-20Reg, they too will be styled by that first rule. I consider that unlikely though. Note that all link states are the same except for the hover. And the links must always be defined in the order that mytaxsite has used (LVHA - or "Love HA!" as a mnemonic).

The data-xxx attributes are quite normal on an HTML5 page, but this page has an XHTML doctype. Nevertheless, I would not expect those usages to interfere with link expression. The only way we can know for sure is to have a link to the real page. The "enroll..." link is working fine for me on the Mac on the sample page.

I was going through the CSS creation process as provided by Dreamweaver which itemizes it all, obviously. I was not aware of the consolidation possibility above. Another lesson learned. THANK YOU, Murray!

Examine the syntax used in the consolidated selector (the first one) carefully. Note that the individual grouped selectors are separated by a comma, and that the full context of each group is complete. To clarify, for this simplified code -

<p><a href="foo">foo</a></p>

this will work -

p a, p a:visited, p a:active { ... }

but this will not -

p a, a:visited, a:active { ... }

The latter will correctly style anchor tags that are within paragraph tags for the a:link state, but will then style ALL anchor tags regardless of their context for the visited and active states.

In fact, it's not necessary to reiterate those states in the selectors. A simple rule like this -

p a { ... }

will style ALL states of all anchor tags within paragraphs. Typically, that's how I will do my pseudo-class assignments:

a { ... }

a:hover { ... }

Usually I'm only interested in the hover state, but if I need the visited state to express, then I add it between the two -