CSS: Links virker ikke ...

Tags:    html css link hover color

Hej Udvikleren!

Jeg har nogle links som ikke vil farves.

A:hover
{
color: white;
text-decoration: none;
}


Mit link:

<a href="home.html" style="color: white">Hjem</a>

Har tilføjet style="color:"... fordi jeg ikke kan farve links med A:link heller... En idé om hvad der er galt?



5 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 5 karma
Sorter efter stemmer Sorter efter dato
@Daniele, det er helt fint og helt korrekt at bruge white/black/red osv som farve angivelse i CSS. Det er en del af speccet og implementeret i alle browsere. Læs mere her: http://www.w3schools.com/cssref/css_colornames.asp

@Pascal, Der er to muligheder:

1) At dit stylesheet ikke bliver hentet.
- Har du refereret rigtigt til dit stylesheet?
- Bliver andre elementer stylet rigtigt?

2) At du har lavet en syntaks fejl.

Jeg går ud fra at du har tjekket punkt 1, og hvis ikke så er det trivielt. Punkt 2 er den spændene del.

Det piner mine øjne at se at du bruger versaler (store bokstaver) til dine element selectors i CSS. Det er best-practice at navngive elementer med små bokstaver, klasser med små bokstaver og _, - eller camelcase og IDer med stort begyndelses bokstav... Men det må du jo selv om.

Den første oplagte fejl er, at du har lavet en syntaks fejl umiddelbart før det CSS du viser os. Har du fx glemt at lukke et sæt brackets eller har du glemt et semikolon, så vil det gøre at resten af din CSS ikke bliver læst. Browsere ignorerer alt det CSS den ikke forstår - det er en fordel når vi arbejder med progressive enhancement, men kan være irriterende når man leder efter den lille syntaksfejl der får det hele til at sejle.

Den anden fejl kunne være at du har nogle uheldige tegn i din selector. Prøv at slette linjen og skriv den igen - nogen gange - og især på danske tastaturer kan man fucke det op hvis man får ramt backping tasten (til venstre for backspace - knappen der laver accent over e når man skriver idé) - hvis man rammer backping og skriver et mellemrum bagefter laver nogle editors nogle underlige tegn (som ligner mellemrum for os) men som forstyrer browsernes rendering af din css.

Generelt er det en dum idé at bruge linjeskift efter selectors. Hvis du serverer en tekst fil skrevet på en Windows maskine og du serverer filen i UTF8 kan nogle browsere få \CR\LF lineendings på tværs og læse det som et tegn og ikke et linjeskift - og et tegn der gør at den ikke forstår din selector.

edit: Jeg har lige copy/pastet din css til jsfiddle.net og det virker fint. Så jeg tror faktisk mest på at det er punkt 1 den er gal med...



Indlæg senest redigeret d. 18.02.2012 22:58 af Bruger #17015
Fold kodeboks ind/udCSS kode 


Fold kodeboks ind/udHTML kode 


Prøv bare at skrive sådan her.
Du har ikke eventuelt stylet på dine links et andet sted fra?



Indlæg senest redigeret d. 18.02.2012 22:09 af Bruger #16025
.



Indlæg senest redigeret d. 18.02.2012 22:09 af Bruger #14816
@Gustav
Jeg argumenterer ikke for at man ikke må bruge white, black osv. Det har jeg slet ikke nævnt, som du tydeligvis tror. Jeg gav blot et eksempel, hvori jeg troede at hans attribut style gik ind og overskrev. Men det er tydeligvis ikke problemet.

Men som jeg også skriver;
"Du har ikke eventuelt stylet på dine links et andet sted fra?"

Måske havde han stylet på sine links fra et andet punkt, eller ikke kunne komme ind til sine links på alm. vis. Nu kender jeg jo kun det lille udsnit af koden, og kan ikke regne ud hvordan strukturen for hans kode er sat op. Så undskyld mig.



@Daniele, det var den eneste ændring jeg så du havde lavet - du giver ikke nogle supplerende oplysninger, og så ville jeg bare give dig linket med på vejen for en sikkerhedsskyld.

For øvrigt, så kan det også skyldes at links tidligere er stylet med;

1) Enten en mere præcis selector. Hvis du har en linje: "nav ul li a { color: pink; }" og senere en linje "a { color: blue }". Så vil linket: "<nav><ul><li><a href="#">Hej</a></li></ul></nav>" være pink og linket "<p><a href="#">Hej</a></p> være blåt.

2) En overrulende regel for samme selector. Hvis du har en linje "a { color: pink !important; }" og senere en linje "p a { color: blue; }" så vil linket: "<p><a href="#">Hej</a></p>" være pink og ikke blåt - selvom den blå farve både bliver sat senere og har en mere præcis selector - og derfor efter al fornuft burde overrule. Men !important overruler - generelt skal man holde sig fra at bruge den - men den kan være effektiv hvis man skal lave hurtige hacks i skidt implementerede plugins i fx. wordpress.



t