Keskustelu: Nettisivujen teko: CSS: linkkiongelmia

Linkit CSS:ssä:

a.main:link {font-family: Verdana; font-size: 12px; font-weight: normal; color:#d0d0d0; text-decoration:none}
a.main:visited {font-family: Verdana; font-size: 12px; font-weight: normal; color:#d0d0d0; text-decoration:none}
a.main:hover {font-family: Verdana; font-size: 12px; font-weight: normal; color:#a61010; text-decoration:none}
a.main:active {font-family: Verdana;font-size: 12px; font-weight: normal; color:#a61010;text-decoration:none)
}
A.link-footer:link {font-family: Verdana; color:#404040; font-size: 14px; font-weight: bold; text-decoration:underline}
A.link-footer:visited {font-family: Verdana; color:#404040; font-size: 14px; font-weight: bold; text-decoration:underline}
A.link-footer:hover {font-family: Verdana; color:#a61010; font-size: 14px; font-weight: bold; text-decoration:underline}
A.link-footer:active {font-family: Verdana; color:#a61010; font-size: 14px; font-weight: bold; text-decoration:none}
}
a.link-footer-current:link{font-family: Verdana; color:#a61010; font-size: 14px; font-weight: bold; text-decoration:underline}
a.link-footer-current:visited{font-family: Verdana; color:#a61010; font-size: 14px; font-weight: bold; text-decoration:underline}
a.link-footer-current:hover{font-family: Verdana; color:#a61010; font-size: 14px; font-weight: bold; text-decoration:underline}
a.link-footer-current:active{font-family: Verdana; color:#a61010; font-size: 14px; font-weight: bold; text-decoration:none}
}

Eli mikä mahtaa mättää? Firefoxissa ja IE:ssä linkit näyttävät siltä kuin olin suunnitellutkin, mutta ainakin Operassa .link-footer-current:link muuttuu väriltään siniseksi. Muutoin linkin muotoilut toimivat. Safarissa taasen kaikki .link-footer-current linkit ovat sinisiä, vaikka muut niille annetut ominaisuudet toimivat.

Taisi olla olla sivuhistoria poistamatta - kyllä link-footer-current:link on Firefoxissakin sininen. Millä tavalla nuo linkkien värit saisi toimimaan oikein?

Oletko tarkastanut mitä Työkalut > Virhekonsoli sanoo CSS:täsi?

Kerran css koodissani ei ollut mitään vikaa (vähän samanlainen kuin sulla nyt).
Mutta selaimilla varsinkin firefox pyrkii itse korjaamaan meidän virheitä.
Eli vaikka teet jonkinlaisen pikku virheen niin koodi toimii. Nyt saattaa
olla samanlainen tilanne, eli selain korjaa vaikka varsinaista virhettä ei ole.
Kokeile tehdä koodi tähän tapaan.

a {font-family: Verdana; font-size: 12px; font-weight: normal; color:#d0d0d0; text-decoration:none}

a.main:hover, active {color:#a61010}

A.link-footer: { font-size: 14px; font-weight: bold; text-decoration:underline}
A.link-footer:link, visited, {color:#404040;}
A.link-footer:hover, active { color:#a61010;}
A.link-footer:active {text-decoration:none}

a.link-footer-current:

Tämän viimeisen osaat varmaan tehdä jo itse, en testannut, mutta nyt näet selvemmin mitkä on määritelty samanlaisiksi ja mihin om tehty eroa muihin. välttele määritysten toistoa.

EDIT: itsekään mikään guru ole, mutta tuollainen koodi oli aika opettavainen:

#nav {
        width: 7em;
}
#nav, #nav ul, #nav li {
        margin: 0;
        padding: 0;
        list-style: none;
}
#nav span, #nav a {
        display: block;
        height: 100%;
	width: 100%;
        padding: 0.25em;
}
#nav span {
        color: white;
        background-color: #008;
	position: relative;
}
#nav span:hover {
        color: black;
        background-color: #CCF;
}
#nav span img {
	position: absolute;
	top: 2px;
	right: 2px;
}
#nav li {
        border: thin solid white;
	clear: both;
}
#nav li ul li {
        font-size: 85%;
        border: none;
}
#nav a {
        color: white;
        background-color: #00C;
        text-decoration:none;
}
#nav a:hover {
        color: black;
        background-color: #CCF;
        text-decoration:none;
}

ja tuollaista sillä saa aikaan http://www.veijola.net/sc/menut/menu1b/index.htm

Tällaista kokeilin:

01|a {font-family: Verdana; font-size:12px; font-weight:normal; color:#d0d0d0; text-decoration:none}
02|
03|a.main:hover, active {color:#a61010}
04|
05|a.link-footer: {font-size:14px; font-weight:bold; text-decoration:underline}
06|a.link-footer:link, visited {color:#404040;}
07|a.link-footer:hover, active {color:#a61010;}
08|a.link-footer:active {text-decoration:none}
09|
10|a.link-footer-current:link, visited {color:#a61010;}
11|}

Eihän se toki toimi. Firefoxin virhekonsoli ilmoittaa viidennellä rivillä olevan virheellisen valitsijan. 12. rivillä odotettiin valitsijaa. 12. rivillä tiedosto yllättäen loppui odotellessa virheellisen sääntökokoelman sulkevaa }-merkkiä. Valitsija? Pitääkö ominaisuuksia kuitenkin lisätä linkkeihin (tai toisin päin) moneen kertaan, vaikka niiden pitäisi periytyä?

Rivillä 5 on virhe, a.link-footer jälkeen ei saisi olla kaksoispistettä.

Riviltä 3 puuttuu activen edestä ilmeisesti a.main: ja riviltä 5 puuttuu pseudoluokka(koseon?), ilmeisesti visited. Ja muistathan käyttää LoVe/HAte-muistisääntöä (määrittelyiden oikea järjestys: link, visited, hover, active) :)

puuttuu link
05|a.link-footer:link {font-size:14px; font-weight:bold; text-decoration:underline}

Tulipas monenlaista neuvoa - kiitos niistä. Kokeilin erilaisia variaatioita ja katsoin netin eri oppaista, mutta vanhana tunarina ei onnistu.

01|a {font-family: Verdana; font-size:12px; font-weight:normal; color:#d0d0d0; text-decoration:none}
02|
03|a.main:hover, active {color:#a61010}
04|
05|a.link-footer {font-size:14px; font-weight:bold; text-decoration:underline}
06|a.link-footer:link, visited {color:#404040;}
07|a.link-footer:hover, active {color:#a61010;}
08|a.link-footer:active {text-decoration:none}
09|
10|a.link-footer-current:link, visited {color:#a61010;}
11|}

Tuosta FF virhekonsoli ilmoittaa:

Rivi 12. Odotettiin valitsijaa. Sääntökokoelma jätetty huomiotta virheellisen valitsijan vuoksi.
Rivi 12. Tiedosto loppui odottamattomasti etsittäesssä virheellisen sääntökokoelman sulkevaa }-merkkiä.

Käytännössä link-footer:visited ja mitkään link-footer-current linkit eivät näy suunnitellusti.

Sinulla on ainakin tuossa pätkässä edelleen yksi ylimääräinen } merkki lopussa.

Ja eikös tyylit pidä aina määritellä täyspitkästi, esim.

a.link-footer:link, visited {color:#404040;}

a.link-footer:link,a.link-footer:visited {color:#404040;}

Koska eihän muuten CSS-parseri voi tietää mitä visited meinaa (todennäköisesti arvelee sen olevan visited-niminen tagi).

Alkoi pelittää. kiitos.