# Firefox ignoriert CSS-Eigenschaften



## Moritz123 (9. April 2005)

Hallo!

ich habe ein kleines Problem mit der Interpretation meines CSS-Styles
im Firefox.

Ich habe folgende CSS-Definition:

```
a.nav:link {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color: #663300;
	text-decoration:none;
	
}
a.nav:visited {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color: #663300;
	text-decoration:none;
}
a.nav:hover {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color: #000000;
	text-decoration:underline;
}
```

den ich wie folgt anwende:

```
<a href="#" class="nav">Ziel</a>
```

Leider stellt der Firefox weder Farbe, Schriftart oder Text-Decoration dar,
währrend im IE alles korrekt angezeigt wird.
Woran kann das liegen?


----------



## Sven Mintel (9. April 2005)

mein Firefox zeigt das richtig an 

steht da noch mehr im CSS? Wenn ja, zeig mal bitte...vielleicht ist woanders nen Fehler.


----------



## Moritz123 (10. April 2005)

Das ist in der Tat merkwürdig....
Hier ist die Seite, in der das nicht richtig angezeigt wird:
http://projekte.digitalbiz.de/ise/

Komischweise zeigt er den hover richtig an; genau wie den visited-Link. Den normalen Link zeigt aber wieder nicht an; genauso wie den Footer, der über gleichnamige Klasse definiert wird.

Anbei die komplette CSS als txt:


----------



## Sven Mintel (11. April 2005)

Nimm mal die <style>-Tags und die Kommentare raus.

Die <style>-Tags haben in externen CSS-Dateien nichts zu suchen... ebensowenig die HTML-Kommentare.

Einen Kommentar notiert man CSS(intern *und* extern) so:

```
/*  Ich bin der Kommentar  */
```


----------



## Moritz123 (11. April 2005)

Ok, vielen Dank!

Ich habe die Änderungen vorgenommen und muss merkwürdiges feststellen:
auf meinem lokalen Apache interpretiert er das Stylesheet überhaupt nicht - lade ichd as Ganze auf meinen Webserver funktioniert es einwandfrei.
Ich verstehe die Welt nicht mehr...


----------



## SilentWarrior (11. April 2005)

Das Problem hatte ich auch immer. Ich glaube, das ist irgendein Bug im Firefox, da kann man wohl nix machen.


----------



## Moritz123 (11. April 2005)

Muss wohl. Denn mal interpretiert er Style-Klassen lokal und manchmal nicht.


----------



## Sven Mintel (11. April 2005)

Ich hab das Problem noch nicht gehabt...ich kann mir auch nicht vorstellen, dass das ein Bug im FF sein sollte. Für den Firefox sollte es eigentlich egal sein, ob das auf dem localhost oder sonstwo läuft..Server bleibt Server.

Ich könnt mir eher eine Misskonfiguration des lokalen Servers vorstellen. 
Ist CSS dort als MIME-Type eingetragen?


----------



## Moritz123 (11. April 2005)

Hallo!

also in der mime.types ist text/css angeführt. Sollte es an der Server-Konfig liegen, würde dann der IE die Css-Formatierungen anzeigen?


----------



## tantebootsy (11. April 2005)

Schon versucht, die Datei via "@import" reinzuladen?
N Versuch wär's wert ...

Gruß,
Micha


----------



## Moritz123 (11. April 2005)

So?

```
<style type=text/css>
<!--
 @import "style.css";
-->
</style>
```
?
Wenn ja, dann klappts auch nicht


----------



## Moritz123 (26. April 2005)

Ein kleines Update:

Folgendes habe ich nun festgestellt:
Auf meinem lokalen Server habe ich neben "localhost" mit der IP 127.0.0.1 einen weiteren virtuellen Server "work" mit der IP 127.0.0.2 eingerichtet, welcher auf das Verzeichnis "http://localhost/www" "zugreift" sowie einen virtuellen Server "server02" mit der IP 127.0.0.3.
Rufe ich mit FF die Seite über localhost/www/ oder server02 auf, zeigt er alles korrekt an, währrend wenn ich die Seite über work lade, er das Stylsheet nicht interpretiert. 
Ich verstehe, ganz ehrlich gesagt, die Welt nicht mehr.


----------



## FabianF (27. April 2005)

Das ist falsches CSS -_-
Richtig wäre:

```
.nav a:link {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color: #663300;
	text-decoration:none;
	
}
.nav a:visited {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color: #663300;
	text-decoration:none;
}
.nav a:hover {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color: #000000;
	text-decoration:underline;
}
```


----------



## SilentWarrior (27. April 2005)

Äh... wie kommst du denn darauf? Das andere war schon richtig so, eine Klasse kommt immer nach dem Tag, dem sie zugeordnet ist, durch einen Punkt getrennt. Und nicht umgekehrt.


----------



## Maik (27. April 2005)

@Moritz123: schon mal so probiert?


```
a.nav {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color: #663300;
	text-decoration:none;
	
}

a.nav:link {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color: #663300;
	text-decoration:none;
	
}
a.nav:visited {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color: #663300;
	text-decoration:none;
}
a.nav:hover {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color: #000000;
	text-decoration:underline;
}
```


----------



## FabianF (27. April 2005)

So funktionierts bei mir einwandfrei.

Alternativ würd ich a:hover .nav probieren. Ist jaa das Pseudoformat a:hover das du formatieren willst und nicht nav:hover


----------



## FabianF (27. April 2005)

Habs jetzt getestet.

```
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
		<title>Test</title>
		
				<style type="text/css">
		<!--
		body {
			font-family: Tahoma,Verdana,Arial,sans-serif,Geneva;
			font-size: 12px;
			color: #cccccc;
			background-color:#003366
		}
		a:link, a:visited {
			color: white;
			text-decoration: none;
		}
		a:hover, a:active {
			color: #ff3300;
			text-decoration: none;
		}
		.text2 a:link, .text2 a:visited {
			color: blue;
			text-decoration: none;
		}
		.text2 a:hover, .text2 a:active { color: green; }
		
		a:link .text3, a:visited .text3 {
			color: red;
			text-decoration: none;
		}
		a:hover .text3 , a:active .text3  { color: yellow; }
		
		a.text4:link, a.text4:visited {
			color: purple;
			text-decoration: none;
		}
		a.text4:hover, a.text4:active  { color: black; }
		-->
		</style>
	</head>

	<body bgcolor="#ffffff">
		<div class="text1">Dies ist ein Text mit einem <a href="#">Link</a></div>
		<div class="text2">Dies ist auch ein Text, auch mit einem <a href="#">Link</a>. Diesmal aber in einem Div mit anderer Klasse.</div>
		<div class="text3">Dies ist auch ein Text, auch mit einem <a href="#">Link</a>. Diesmal aber in einem Div mit anderer Klasse.</div>
		<div class="text4">Dies ist auch ein Text, auch mit einem <a href="#">Link</a>. Diesmal aber in einem Div mit anderer Klasse.</div>
	</body>

</html>
```

.text a:hover { } ist das einzige das hier im Mozilla umgesetzt wird.
a:hover .text und a.text:hover gehen nicht.


----------



## Moritz123 (27. April 2005)

Aber an der CSS kann es gar nicht liegen, sonst würde Sie ja generell nicht interpretiert werden. Das ist imho aber nicht der Fall.


----------



## Tim C. (27. April 2005)

Moritz123 hat gesagt.:
			
		

> Aber an der CSS kann es gar nicht liegen, sonst würde Sie ja generell nicht interpretiert werden. Das ist imho aber nicht der Fall.


Naja, so kann man das nicht unbedingt sagen, weil der IE mitunter auch definitiv falschen CSS Code interpretiert. Ich würde auch zu .nav a:hover neigen, da hover die Pseudoklasse des a-Elements ist.


----------



## SilentWarrior (27. April 2005)

> Ich würde auch zu .nav a:hover neigen, da hover die Pseudoklasse des a-Elements ist.


Hümm? I don’t get it…

Also so:
	
	
	



```
a.nav {
    ...
}
```
Aber dann so?
	
	
	



```
.nav a:hover {
    ...
}
```


----------



## FabianF (27. April 2005)

'ne

.nav a:link, .nav a:visited {
...
}
.nav a:hover, .nav a:active {
...
}


----------



## Maik (27. April 2005)

Ich fasse nochmal zusammen: Moritz123 möchte die Links mit der CSS-Klasse *.nav* formatieren - also:


```
<a href="#" class="nav">Ziel</a>
```
CSS-Code:


```
a.nav {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color: #663300;
	text-decoration:none;
	
}
a.nav:link {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color: #663300;
	text-decoration:none;
	
}
a.nav:visited {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color: #663300;
	text-decoration:none;
}
a.nav:hover {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 14px;
	color: #000000;
	text-decoration:underline;
}
a.nav:active { }
```
 [ Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23 ]


@FabianF: deine CSS-Methodik gilt für Links, die in Elementen (=DIVs) mit der Klasse *.nav* eingebettet sind (siehe dein Demo-Source von 13:59).


----------



## SilentWarrior (27. April 2005)

> @FabianF: deine CSS-Methodik gilt für Links, die in Elementen (=DIVs) mit der Klasse .nav eingebettet sind (siehe dein Demo-Source von 13:59).


Genau meine Meinung! Und davon wäre ich auch jetzt nicht überzeugt, wenn nicht Tim das gleiche behauptet hätte…

SilentWarrior (ganz schön verwirrt)


----------



## Moritz123 (28. April 2005)

Also nochmal:
*Es liegt nicht an der CSS-Definition.*
Wers nicht glaubt guckt bitte mit Firefox hier .
Dort wird alles korrekt intrepretiert. Selbige Seite(1:1-Kopie) auf meinem lokalen Server wird nicht interpretiert.


----------



## Maik (28. April 2005)

Vielleicht hängt es am falschen Doctype für dein Frameset?


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

Oder an der fehlenden Zeichensatz-Angabe für die einzelnen Frame-Seiten?


```
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
```


----------



## Harzteufel (28. April 2005)

Hallo, ich hätte auch noch ein kleines Problem und bitte euch um Hilfe...
Wie kann ich Firefox dazubringen einen in CSS definierten Blocksatz (text-align: justify korrekt anzuzeigen? Macht Firefox dies generell nicht oder gibts nen Trick dafür?

Vielen dank für Eure Bemühungen. MfG Harzteufel


----------



## Maik (29. April 2005)

@Harzteufel: FireFox interpretiert den Blocksatz *justify* korrekt - also z.B.:


```
p { text-align: justify; }
```
oder

```
div { text-align: justify; }
```


----------

