css mistake: a:hover

[sysKin]

Hi,

There is a small mistake in www.doom9.org/doom9.css , and also in style definition in each forum file (like the one you're looking at).
There is a definition of how links look:

A { COLOR: "#b75a3e"; text-decoration: none}
a:link { color: #b75a3e; text-decoration: none}
a:hover { color: #D59380; text-decoration: none}
a:visited { color:#b75a3e; text-decoration: none}

in that particular order. The order is wrong, as described in http://www.w3schools.com/css/css_pseudo_classes.asp . In particular

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!


This small mistake means that us happy non-IE users don't have a "hover" indication for visited links. If a link is both visited and hovered, second definition (visited) is used...

:)
Radek

[Neo Neko]

Interesting. If I am not mistaken and I don't think I am, the mistake is mine. IIRC Doom9 is using some of the revamped HTML I did a while back. So it is not because of some ignorant IE specific coder. If anything I tend to be anti-IE specific. :P Still it is the small things that get you. DOH!

[SeeMoreDigital]

The css file appears to have been removed now and replaced with style code on each page.

<STYLE type=text/css>
BODY {FONT-SIZE: 10pt; COLOR: #333333; FONT-FAMILY: Verdana, Arial, Helvetica}
H4 {FONT-SIZE: 10pt; COLOR: #333333; FONT-FAMILY: Verdana, Arial, Helvetica}
TD {FONT-SIZE: 10pt; COLOR: #333333; FONT-FAMILY: Verdana, Arial, Helvetica}
A {COLOR: #b75a3e; TEXT-DECORATION: none}
A:link {COLOR: #b75a3e; TEXT-DECORATION: none}
A:hover {COLOR: #d59380; TEXT-DECORATION: none}
A:visited {COLOR: #b75a3e; TEXT-DECORATION: none}
</STYLE>Is this a better way to go? If so I'll do it on my own web site!


Cheers

[Neo Neko]

Originally posted by SeeMoreDigital
The css file appears to have been removed now and replaced with style code on each page.

<STYLE type=text/css>
BODY {FONT-SIZE: 10pt; COLOR: #333333; FONT-FAMILY: Verdana, Arial, Helvetica}
H4 {FONT-SIZE: 10pt; COLOR: #333333; FONT-FAMILY: Verdana, Arial, Helvetica}
TD {FONT-SIZE: 10pt; COLOR: #333333; FONT-FAMILY: Verdana, Arial, Helvetica}
A {COLOR: #b75a3e; TEXT-DECORATION: none}
A:link {COLOR: #b75a3e; TEXT-DECORATION: none}
A:hover {COLOR: #d59380; TEXT-DECORATION: none}
A:visited {COLOR: #b75a3e; TEXT-DECORATION: none}
</STYLE>Is this a better way to go? If so I'll do it on my own web site!


Cheers

Actually no. One of the huge advantages of CSS is that it allows you to apply the same CSS styles to multiple pages all from a single file. Separating form from function. Like what XML does only to a lesser extent. With the styles embedded in the pages it bloats the pages download. Instead of downloading the information once it has to download it with each and every page. Further if you want to change something in the general layout of the page you have to go and moddify every page on your site instead of just a single field in a single file. There are times when embedded style sheets are ok. But most times embedded style sheets are an awful idea. The problem is that most major wysiwig (shudder) html page design setups (dreamweaver:ack / frontpage:kill me now) are brain dead and don't automate that process. Rather they choose to duplicate the work in each and every page. And in frontpage's case rape the HTML outright.

[Doom9]

You guys are mixing forum and site.. these are two different pairs of shoes. The Site has an external stylesheet. The forum does not because you can enter the stiles directly in the CP and it is then added to each page.

Now I've made the change at both places (site not online yet), however, while it's now corresponding to the specs, there's now no way to tell anymore if a link has been visited or not as a:link and a:visited is the same. With the a:hover bug, at least you could tell that a link where you don't have a color change when you hover over it, you've already been there. So if anybody complains, you know where I'll send them ;)