[CSS] Problem mit :visited

TIMΣ™ · 04/12/2013, 16:12

Hi Community. Habe bischen gegoogelt, jedoch hat es mir nicht viel geholfen

. Mein Problem besteht einfach darin, dass :visited in CSS nicht funktionieren möchte.

Mein derzeitiger Code sieht so aus

HTML Code:

a:visited {
    text-decoration: line-through;
}

Einen Fehler sehe ich jedenfalls nicht. Die ":" Elemente haben ja eine bestimmte Reihenfolge, demnach habe ich a:visited vor a:hover und a:hover vor a:active gesetzt. a:active und a:hover funktionieren soweit gut. Klar es gibt noch a:link und a:focus, dennoch benutze ich die hierfür bzw. brauche ich sie hierfür nicht. Wenn ich das a:visited alleine stehen lasse funktioniert es jedoch...

Wenn ich mich nicht irre war es so, dass wenn man a:visited vor a:hover setzt, dass dieses durch das :hover überschrieben wird, oder? Aber an anderen Stellen funktioniert es auch nicht. Liegt es evt. am Doctype, oder an einem fehlenden meta-Tag? Was Doctype und meta angeht, da kenne ich mich nicht wahnsinnig mit aus, btw. weiß ich nicht, wann ich welches brauche. Zum Glück liefert HTML5 das leichte Doctype mit

. Aber darum geht es ja gerade nicht.

Mein derzeitiger Doctype sieht so aus

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Meine Browser sind auch up-to-date, wobei dieser Fehler komischerweise bei einer alten Version des Browser funktioniert.

Wäre nett wenn mir jemand helfen könnte, Mfg.

MrPuschel · 04/12/2013, 16:32

Nimm erstmal einen doctype der nicht 14 Jahre alt ist

Zu :visited

Sollte es dort funktionieren aber auf deiner Seite nicht, öffne deine Seite in Chrome, rechts-klicke auf deinen Link und Wähle "Element untersuchen" aus. Dann öffnet sich ein neues Fenster in dem du rechts unten untersuchen kannst welcher style was überschreibt.

TIMΣ™ · 04/12/2013, 17:11

Irgendwie hat mir der erste Link nicht geholfen, da dort genau der Header aufgelistet wird, btw. der loose.dtd Header ändert auch nichts. Und mit den XHTML Headern habe ich nichts am Hut.

Auf der Webseite funktioniert es...

Habe das Element auch schon untersucht, aber nichts gefunden. Btw. habe auch Firebug für Firefox ^^

Schonmal danke für die Hilfe, nur läuft es komischerweise immernoch nicht.

PseudoPsycho · 04/12/2013, 17:52

Quote:

Originally Posted by TIMΣ™

Irgendwie hat mir der erste Link nicht geholfen, da dort genau der Header aufgelistet wird, btw. der loose.dtd Header ändert auch nichts. Und mit den XHTML Headern habe ich nichts am Hut.

Naja, 'nen HTML4.01-Doctype solltest du inzwischen zumindest nicht mehr nehmen. Wenn du kein XHTML verwendest, dann nimm' den für HTML5:

HTML Code:

<!Doctype html>

Ganz einfach!

Sollte es trotzdem nicht funktionieren, lad' die Seite mal irgendwo hoch und poste den Link.

TIMΣ™ · 04/12/2013, 18:24

Quote:
Originally Posted by PseudoPsycho
Naja, 'nen HTML4.01-Doctype solltest du inzwischen zumindest nicht mehr nehmen. Wenn du kein XHTML verwendest, dann nimm' den für HTML5:
HTML Code:
<!Doctype html>
Ganz einfach!

Sollte es trotzdem nicht funktionieren, lad' die Seite mal irgendwo hoch und poste den Link.

Jo normalerweise nehme ich auch den HTML5 Doctype nur ändert das ganze nichts an der Sache. Ich habe ihn nur benutzt weil auf den Rechnern auf unserer Schule ziemlich alte Browser sind und ich dachte, dass diese alten Dinger den HTML5 Doctype evt. noch nicht kennt, oder irre ich mich?

Hier die CSS Datei

Code:

body {
    background-color: #071918;
	font-family: arial;
}

table {
    width: 70%;
    background-color: #FFFFFF;
}

td {
    padding: 8px 20px 8px 20px;
	text-align: justify;
}

ul {
    list-style-type: square;
}

a {
    color: #848484;
	text-decoration: none;
}

a:visited {
    text-decoration: line-through;
}

a:hover {
    color: #000000;
	padding-left: 5px;
}

a:active {
    font-family: verdana;
}

#heading {
    color: #FFFFFF; 
	text-align: center;
	font-size: 50px;
}

#fixiert {
    position: fixed;
	left: 8px;
	top: 170px;
	background-color: #FFFFFF;
	border: 3px solid #045FB4;
    width: 14%; 
	height: 300px; 
	text-align: left;
}

#navigation { 
    text-align: center;
	font-size: 20px;
}

#absolute { 
    position: absolute;
    left: 8px;
	top: 8px;
	border: 3px solid #045FB4;
	background-color: #FFFFFF;
	width: 14%;
    height: 150px;
}

#header {
    height: 130px;
}

#schluss {
    color: #FFFFFF;
	text-align: center;
}

PseudoPsycho · 04/12/2013, 18:36

Quote:

Originally Posted by TIMΣ™

Jo normalerweise nehme ich auch den HTML5 Doctype nur ändert das ganze nichts an der Sache. Ich habe ihn nur benutzt weil auf den Rechnern auf unserer Schule ziemlich alte Browser sind und ich dachte, dass diese alten Dinger den HTML5 Doctype evt. noch nicht kennt, oder irre ich mich?

Der HTML5-Doctype ist auf Abwärtkompatibilität ausgelegt. Sollte keinen großen Unterschied machen.

Quote:

Ich schaue mal dass ich die CSS Datei gleich hier rein poste.

Naja, im Idealfall lieber bei Google Drive, JSFiddle, 'nem Webhoster, etc. Dann kann man mit Chromes Elemente-Untersuchung recht schnell sehen, woran's liegt.
Ansonsten fällt mir nur die Option ein, a durch a:link zu ersetzen, damit es zu keinen Komplikationen kommt. Ebenso könntest du mittels important das Überschreiben verhindern:

HTML Code:

a:visited {
    text-decoration: line-through !important;
}

TIMΣ™ · 04/12/2013, 18:45

Quote:
Originally Posted by PseudoPsycho
Der HTML5-Doctype ist auf Abwärtkompatibilität ausgelegt. Sollte keinen großen Unterschied machen.

Naja, im Idealfall lieber bei Google Drive, JSFiddle, 'nem Webhoster, etc. Dann kann man mit Chromes Elemente-Untersuchung recht schnell sehen, woran's liegt.
Ansonsten fällt mir nur die Option ein, a durch a:link zu ersetzen, damit es zu keinen Komplikationen kommt. Ebenso könntest du mittels important das Überschreiben verhindern:
HTML Code:
a:visited {
    text-decoration: line-through !important;
}

Auf a:link bin ich auch schon gekommen hatte aber leider keinen Erfolg. Mal sehen wie es mit !important aussieht, btw. was kann das important, sehe das jetzt schon öfter?

/e: Ne hat nicht geholfen.

PseudoPsycho · 04/12/2013, 19:03

!important sorgt dafür, dass die Angabe als wichtiger als andere, gleichartige Angaben eingestuft wird.
Hab' übrigens den Fehler gefunden - er liegt nicht bei dir.

Die Demo auf

funktioniert aus diesem Grund auch nicht, die auf

(auf ein nicht-Link-Element) schon.

TIMΣ™ · 04/12/2013, 19:06

Quote:

Originally Posted by PseudoPsycho

!important sorgt dafür, dass die Angabe als wichtiger als andere, gleichartige Angaben eingestuft wird.
Hab' übrigens den Fehler gefunden - er liegt nicht bei dir.
Die Demo auf funktioniert aus diesem Grund auch nicht, die auf (auf ein nicht-Link-Element) schon.

Achso verstehe, d.h. es geht alles außer text-decoration: line-trough; bei a:visited? Und danke.

MrPuschel · 04/12/2013, 21:27

Wenn er nur eine Eigenschaft, in einem Browser, in einer Version testet ist es seine Schuld.

Du benutzt xhtml. Nimm den doctype.

Synatex · 04/13/2013, 00:34

Quote:

Der HTML5-Doctype ist auf Abwärtkompatibilität ausgelegt. Sollte keinen großen Unterschied machen.

Abwärtskompatibel ist der nicht. Der hat einfach keine Angabe zu speziellen Versionen wodurch der Browser den Code, falls er den HTML5 Doctype nicht kennt, das so interpretiert wie er es denkt es sei richtig. Im Grunde genommen hat er es mit dem HTML4 doctype (falls es wirklich HTML4 ist), wenn der Firefox/IE genauso veraltet ist wie bei uns, alles richtig gemacht.