CSS wird nicht ausgeführt - im IE funktioniert es.

Trabiteamer

Hallo zusammen,

die neueste Version des Firefox, frühere allerdings auch schon, zeigen meine Seiten nicht so an, wie ich es möchte. Im IE sieht alles korrekt aus, wie es eben geplant ist.
Die Fehlerkonsole (geniales Teil), zeigt mir Fehler in meinem CSS an. Nur finde ich nicht, dass es Fehler sind. Allerdings lasse ich mich auch gerne vom Gegenteil überzeugen.
Fehlermeldung lautet: Selector erwatet. Regelsatz wegen ungültigem Selektor ignoriert.
Anbei mal mein CSS-File, in dem die Zeilen 8, 35 und 38 moniert werden:

Code

h4 {font-family:Verdana;
    font-size:14px;
}
body {background-color: #ffffff;
      font-family: Verdana;
      font-size: 11pt;
      color: black;
}    
table {border-color: #000000;
       background-color: #ffffff;
       font-family: Verdana;
       font-size: 11px;
       padding-left: 2px;
       padding-right: 2px;
}
p {text-align: justify;}
.picture {background-color: #d7d7d7;
          padding-left: 2px;
          padding-right: 2px;
          padding-top: 2px;
          padding-bottom: 2px;
}
th {font-size: 11px;
    background-image: url(http://www.trabitechnik.com/images/bg_blue.gif);
}
td {background-color: #d7d7d7;
    font-size: 11px;
}
.picture  {
  background-color: #E6E6E6;
}
.rate {
  background-color: #0000ff;
} 
.box {
  background-color: #a3a3a3;
} 
.comment {
  background-color: #C0D0DE;
}
.error {
  background-color: #d7d7d7;
  color: #FF0000;
}
.spezial {background-color: #f1f1f1;
          color: #000000;
}
input, select, textarea {background-color: #C0D0DE;
                         height: 16px;
                         width: 150px;
                         font-size:12px;
                         font-family: verdana, arial;
                         border: 1px solid #000000;
}
.multiple {height: 64px;}
.more_button {width: 90px;
              height: 14px;
              font-size: 10px;
}
.lang {width: 300px;}
.radio {background-color: #d7d7d7;
        width: 10px;
        border: 0px;
        height: 12;
}
.wradio {background-color: #ffffff;
         width: 20px;
         border: 0px;
}
.datum {width: 40px;}
.check {width: 20px;}
.search {width: 80px;}
.text {background-color: #ffffff;}
.textbox50 {width: 300;
            height: 100;
}
A.menulink {display: block;
            width: 72px;
            text-align: center;
            text-decoration: none;
            font-family: arial;
            font-size: 12px;
            color: #000000;
            border: solid 1px #ffffff;
            text-decoration: none;
}
A.menulink:hover {border: solid 1px #000fff;
                  background-color:C0D0DE;
                  text-decoration: none;
}
A.list {display: block;
        width: 408px;
        text-align: left;
        font-family: arial;
        text-decoration: none;
        font-size: 12px;
        color: blue;
        border: none;
}
A.list:hover {border: none;
              text-align: center;
              background-color: #C0D0DE;
              text-decoration: none;
}
a.left {display: block;
        width: 156px;
        text-align: left;
        font-family: arial;
        text-decoration: none;
        font-size: 12px;
        color: blue;
        border: none ;
}
a.left:hover {border: none;
              background-color: #C0D0DE;
              text-align: center;
              text-decoration: none;
}


a:link { color:#0000FF; text-decoration:none }
a:visited { color:#0000FF; text-decoration:none }
a:hover { color:0000ff; text-decoration:underline }
a:active { color:#0000FF; text-decoration:underline }
a:focus { color:#000000; font-weight: bold; text-decoration:underline }

Alles anzeigen

Ich hoffe, mir kann jemand das Phänomen aufklären.

mfg
Trabiteamer

bugcatcher

Für CSS-Prüfung gibts Validatoren:
http://jigsaw.w3.org/css-validator/

64 .radio Ungültige Nummer : height nur 0 kann ein length sein. Nach der Zahl muß eine Einheit stehen. : 12 (z.b. "12px")

74 .textbox50 Ungültige Nummer : width nur 0 kann ein length sein. Nach der Zahl muß eine Einheit stehen. : 300 (z.b. "300px")

75 .textbox50 Ungültige Nummer : height nur 0 kann ein length sein. Nach der Zahl muß eine Einheit stehen. : 100 (z.b. "100px")

88 A.menulink:hover Ungültige Nummer : background-color C0D0DE ist kein color-Wert : C0D0DE ("#" vergessen -> "#C0D0DE")

122 a:hover Ungültige Nummer : color Unknown dimension0000ff (auch hier "#" vergessen -> "#0000ff")

Trabiteamer

Danke für die Antwort.

Ok, das habe ich gecheckt und geändert.
Es erklärt allerdings nicht die seltsame Meldung der Fehlerkonsole und die nicht wunschgemäße Ausführung des CSS.

Ich kann mir nicht vorstellen, dass .box, oder .comment keine ordnungsgemäßen Selektoren sind.
Was bedeutet denn die Meldung des CSS-Validators?

Parse error - Unrecognized }� .box { background-color: #a3a3a3; }
Parse error - Unrecognized }� .comment { background-color: #C0D0DE; }

Wer klärt mich auf?

bugcatcher

Sind vermutlich reservierte Wörter (evtl. aus dem XUL-Sprachbereich) die nicht verwendet werden dürfen. Ändere die Namen doch einfach test weise mal um.

Trabiteamer

Hmpft, weißt Du, wie groß meine Seite ist?
Das gibt eine elende Sucherei...
Naja, will ich die Sache mal angehen.

bugcatcher

Hab ja keine Ahnung wie Du Seiten baust, aber mein Text-Editor hat die Funktion "Alles Ersetzen durch" und er kann das auch über mehrere Dateien hinweg.

Zudem kannst Du das ganze ja auch erstmal im Kleinen testen. Und wenn die Seite so groß ist, dass eine elende Sucherei daraus entspringt, ist sie vielleicht zu groß`? ; )

Trabiteamer

Jepp, hab ich erst mal im "kleinen" verändert, allerdings ohne großen Erfolg. Hab einfach andere Namen verwendet, aber nun moniert das Tool, also der Validator das ebenso. Ich krieg hier bald die Krise... So viele reservierte Wörter kann es doch nicht geben.

Zur Größe der Seite - jepp, sie ist ziemlich umfangreich wink:

bejot

Moin,
natürlich kannst du die Klasse box verwenden.
[Blockierte Grafik: http://upload7.postimage.org/660629/Image1.jpg]

Trabiteamer

Nachdem ich die Einträge gedoppelt und mit anderen Namen versehen habe, funktioniert die Klasse .box nun auch im Firefox. Allerdings:

Code

Ihr validiertes Cascading Style Sheet:
h4 {
font-family : Verdana;
font-size : 14px;
}
body {
background-color : #ffffff;
font-family : Verdana;
font-size : 11pt;
color : black;
}
���� table {
border-color : #000000;
background-color : #ffffff;
font-family : Verdana;
font-size : 11px;
padding-left : 2px;
padding-right : 2px;
}

Alles anzeigen

Was bedeuten denn die Fragezeichen vor table? Zudem moniert das Tool nun die neuen Klassen an:

33 Parse error - Unrecognized }� .my_bx { background-color: #a3a3a3; }
35 Parse error - Unrecognized }� .my_cm { background-color: #c0d0de; }
39 Parse error - Unrecognized }� .comment { background-color: #C0D0DE; }

Wie zu erkennen ist, wird die Klasse .box nichts bemängelt, obwohl sie immer noch existiert und nun verarbeitet wird.

Verwirrend... :roll:

bejot

Dein CSS ist OK.

Lasse dich nicht von dem Validator einschüchtern :wink:

Er ist auch nicht das Maß aller Dinge.

Unrecognized heißt ja nicht Fehler sondern er hat es nicht erkannt.

Auch der Parser macht Fehler.

Du kannst ja mal dein CSS hier eingeben:
http://jigsaw.w3.org/css-validator/…lidate-by-input

bugcatcher

Es würde im übrigen helfen, wenn man Deine Seite auch mal testen könnte.

Trabiteamer

bejot: das dort validierte CSS macht keine Probleme. Trotzdem zeigt Firefox die Seiten unterschiedlich zum IE an und die Hinweise in der Fehler-Konsole zeigen Probleme mit dem CSS.

Die Seite ist übrigens http://trabitechnik.com

JonHa

Wegen dem Fehler: Ich vermute, du hast merkwürdige Sonderzeichen in deinem CSS. Ist sehe da jedenfall teilweise so Zeichen die auf ein nicht-darstellbares Sonderzeichen hindeuten.

bugcatcher

Zitat von Trabiteamer

Trotzdem zeigt Firefox die Seiten unterschiedlich zum IE an und die Hinweise in der Fehler-Konsole zeigen Probleme mit dem CSS.

also erstmal pflichte ich JonHa bei. Ich vermute auch das bei dir ist ein Sonderzeichen in der CSS drin ist, das "unsichtbar" ist.

Allerdings! Wenn es dir um Darstellungsunterschiede geht... IE und Firefox interpretieren nicht alle CSS-Befehle identisch. Gerade der IE hat (auch noch in Version 7) zahlreiche CSS-Interpretationsfehler. Auch die Standardwerte sind bei beiden nicht immer identisch, was bei fehlender Festlegung durch CSS-Vorgaben auch zu Unterschieden führen kann, besonders da der Firefox je nach DocType andere Vorgaben verwendet, während dem IE der DocType in der Regel reichlich egal ist. Beliebt sind vor allem so Fehler wie der Boxmodel-Bug vom IE, der in Kombination von padding/border und width/height auftritt.

Und die Fehlerkonsole im Firefox sagt auch nicht, wo Fehler im Quelltext sind, die eine abweichende Darstellung vom IE verursachen könnte, sondern die ist auch nur ein Validator, die sich an die Gegebenheiten des Firefox orientiert. Fehler oder Warnungen müssen dabei nicht direkt auch die Ursache für ein Darstellungsproblem sein, da Firefox dann dennoch sich an seine automatischen Fehlerbehebung macht.

Wenn Du uns sagst, was genau dich stört, könnte man wohl genauer auf Dein Problem eingehen. Wobei dein Tabellen-Ungetüm natürlich alles andere als einfach zu Pflegen und zu Prüfen ist. ; )

Trabiteamer

Vielen Dank für die vielen Tipps, es wurde die Lösung gefunden und auch schon von euch kommuniziert

Im CSS waren tatsächlich unwillkommene Zeichen drin - fragt mich bitte nicht, wie die dahin kamen. Nach einer Exekution derselben funktioniert nun auch mein Tabellenungetüm.

Nochmals vielen Dank an alle Mitwirkenden :wink: