Welche Regel gilt?

[Don P]

Hallo,

Habe gerade ein seltsames Phänomen entdeckt:

Nach der serverseitign Prüfung des geposteten Formulars soll eine Textbox mit roter Rahmenfarbe vershen werden, wenn sie falsch oder gar nicht ausgefüllt wurde.

Normalerweise ist die Textbox z.B. mit class="textInput" ausgezeichnet, und das Serverscript hängt dann ggf. noch einen Klassennamen dran, so dass der Client class="textInput inputError" sieht, und jetzt doch eigentlich die Rahmenfarbe von .inputError darstellen sollte. Aber das geschieht nicht. Es kommt nach wie vor nur die Rahmenfarbe von .textInput zum Zug.

WTF? Wenn ich mir das mit "Firebug" oder auch mit den "Entwicklertools" des IE8 anschaue, dann sind beide Rahmenfarben aktiv. Normalerweise wird kann doch nur jeweils eine Einstellung gültig, und alle anderen, die dieselbe CSS-Eigenschaft desselben Elements ansprechen, sind als inaktiv durchgestrichen. Aber hier ist es nicht so. Kann mir das jemand erklären?

.textInput {  
  border: 1px solid #B7AE88;  
}  
.inputTextError,  
.inputDropDownError {  
  border-color: #FF0000;  
}

Gruß, Don P

[Jens Holzkämper]

Tach,

Normalerweise ist die Textbox z.B. mit class="textInput" ausgezeichnet, und das Serverscript hängt dann ggf. noch einen Klassennamen dran, so dass der Client class="textInput inputError" sieht, und jetzt doch eigentlich die Rahmenfarbe von .inputError darstellen sollte.

hier schreibst du inputError, im CSS ist aber nur inputTextError erwähnt.

mfg
Woodfighter

[Don P]

Hallo,

hier schreibst du inputError, im CSS ist aber nur inputTextError erwähnt.

Ah ja sorry, das ist aber nur im Posting. In der Erklärung hatte ich einfach Beispiele gebracht. Die Klassennamen stimmen in Wirklichkeit schon überein ("inputTextError").

Habe jetzt rausgefunden, dass die Regel für .inputTextError früher geladen wird. Dann wird sie natürlich anschließend überschrieben.

Setze ich !important dazu, dann klappt alles wie gewünscht.

Jetzt wundert mich trotzdem noch, warum mir die Debug-Tools die widersprüchlichen Regeln als aktiv darstellen.

Gruß, Don P

[Jens Holzkämper]

Tach,

Habe jetzt rausgefunden, dass die Regel für .inputTextError früher geladen wird. Dann wird sie natürlich anschließend überschrieben.

Setze ich !important dazu, dann klappt alles wie gewünscht.

important solltest du wenn möglich vermeiden, ich würde stattdessen halt entweder für eine entsprechende Reihenfolge oder für eine höhere Spezifität des Fehler-Selektors sorgen.

Jetzt wundert mich trotzdem noch, warum mir die Debug-Tools die widersprüchlichen Regeln als aktiv darstellen.

Da du kein Online-Beispiel bereitgestellt hast und der Quelltext, den du präsentiert hast auch nicht deinem echten Quelltext entsricht, kann man nur raten. Sieht dein wahrer Quelltext so aus, wie der von dir gepostete, würde ich vermuten es liegt daran, dass du einmal border und einmal border-color definierst, die restlichen Zuweisungen aus border bleiben ja aktiv.

mfg
Woodfighter

[Don P]

Hallo,

Jetzt wundert mich trotzdem noch, warum mir die Debug-Tools die widersprüchlichen Regeln als aktiv darstellen.

Sieht dein wahrer Quelltext so aus, wie der von dir gepostete, würde ich vermuten es liegt daran, dass du einmal border und einmal border-color definierst, die restlichen Zuweisungen aus border bleiben ja aktiv.

Ja, das muss es wohl sein. Tatsächlich habe ich einnmal border und einmal border-color, so wie oben gepostet.

Dachte, dass sich dann halt border-color ändert. Die Debug- Tools zeigen aber beide widerspüchlichen border-colors als aktiv an, d.h. keins davon ist durchgestrichen, wie das normalerweise der Fall ist, wenn eine Einstellung durch eine andere überschrieben wurde. Oder vielleicht ist es auch normal bzw. üblich, dass nur durchgestrichen wird, wenn eine Regel mit höherer Spezifität greift? So gut kenne ich diese Tools halt nicht.

Ein online-Beispiel geht schlecht, müsste extra was basteln, Webspace besorgen und so.

Gruß, Don P

[Cheatah]

Hi,

important solltest du wenn möglich vermeiden, ich würde stattdessen halt entweder für eine entsprechende Reihenfolge oder für eine höhere Spezifität des Fehler-Selektors sorgen.

stimmt. Eine Fehlerbehandlung ist andererseits das klassische Beispiel für den sinnvollen Einsatz von !important.

Cheatah

[Don P]

Hallo,

Da du kein Online-Beispiel bereitgestellt hast und der Quelltext, den du präsentiert hast auch nicht deinem echten Quelltext entsricht, kann man nur raten.

Hier also noch ein komplettes Beispiel, mit validem HTML5 und validem CSS-2.1:

<!DOCTYPE html>  
<html>  
  
  <head lang="en"><meta charset="utf-8">  
  
    <title>CSS test</title>  
  
    <style>  
  
      [code lang=css]body { font-family:sans-serif; padding-top:6em; }  
      p { width:30%; margin:auto; }  
  
      .textInputError { border-color: #FF0000 !important; }  
      .textInput { text-align:center; border: 1px solid #B7AE88; }

</style>

</head>

<body>

<p>
        <label for="inputName">Name:</label>
        <input id="inputName" value="...bitte ausfüllen..." class="textInput textInputError" type="text" />
    </p>

</body>

</html>[/code]

Der Rahmen ercheint (dank !important) wie gewünscht in rot, aber sowohl FireBug als auch die "Entwicklertools" des IE8 behaupten, dass alle border-colors angewendet werden, obwohl sie widersprüchlich sind.

Das irritiert mich, denn es stellt die Verlässlichkeit dieser Tools doch ziemlich in Frage.

!important lasse ich hier ausnahmsweise mal stehen.

Gruß, Don P

[Gunnar Bittersmann]

@@Don P:

nuqneH

Hier also noch ein komplettes Beispiel, mit validem HTML5 und validem CSS-2.1:

Valide vielleicht, aber sinnvoll?

<html>
  <head lang="en">

Eine Sprachangabe für 'head', also für den darin befindlichen 'title'?

Keine Sprachangabe für 'html', also für das gesamte Dokument?

Qapla'

[Don P]

Hallo,

Eine Sprachangabe für 'head', also für den darin befindlichen 'title'?

Keine Sprachangabe für 'html', also für das gesamte Dokument?

Shit, hast recht. Ich bin einfach nicht mehr 20. Auf Anhieb fehlerfrei geht anscheinend nicht mehr. Außerdem muss es hier natürlich lang="de" heißen. Bau' doch mal jemand eine Editierfunktion ein... ich wäre der zweifellos der Editierkönig ;).

senilen Gruß, Don P

[Gunnar Bittersmann]

@@Don P:

nuqneH

Außerdem muss es hier natürlich lang="de" heißen.

Dann aber auch "CSS-Test" im 'title'.

Oder

<html lang="de">  
<title lang="en">CSS test</title>

Qapla'

[Jens Holzkämper]

Tach,

Der Rahmen ercheint (dank !important) wie gewünscht in rot, aber sowohl FireBug als auch die "Entwicklertools" des IE8 behaupten, dass alle border-colors angewendet werden, obwohl sie widersprüchlich sind.

Das irritiert mich, denn es stellt die Verlässlichkeit dieser Tools doch ziemlich in Frage.

also genau so, wie Matthias und ich rieten: Die Regeln gelten doch beide weiterhin, in Firebug werden nur komplett deaktivierte Regeln durchgestrichen und von border: 1px solid #B7AE88; gelten ja zwei Drittel weiterhin.

mfg
Woodfighter

[Don P]

Hallo,

von border: 1px solid #B7AE88; gelten ja zwei Drittel weiterhin.

Ok, das macht Sinn, aber die Eigenschaften werden z.B. von den "Entwicklertools" im IE8 aufgedröselt und einzeln wie folgt aufgeführt, wobei nichts ist durchgestrichen ist:

.textInputError
  border-bottom-color: #ff0000 !important
  border-top-color: #ff0000 !important
  border-right-color: #ff0000 !important
  border-left-color: #ff0000 !important

.textInput
  border-bottom-color: #b7ae88 1px solid
  border-top-color: #b7ae88 1px solid
  border-right-color: #b7ae88 1px solid
  border-left-color: #b7ae88 1px solid

Dasselbe auch, wenn man !important weglässt. Aber dann wird #FF0000 nicht dargestellt, ist klar.

Gruß, Don P

[Don P]

Hallo,

Schon wieder falsch abgeschrieben. So wird es dargestellt:

.textInputError
  border-bottom-color: #ff0000 !important
  border-top-color: #ff0000 !important
  border-right-color: #ff0000 !important
  border-left-color: #ff0000 !important

.textInput
  border-bottom: #b7ae88 1px solid
  border-top: #b7ae88 1px solid
  border-right: #b7ae88 1px solid
  border-left: #b7ae88 1px solid

Uann stimmt's ja auch:
Von .textinput gelten 2/3, und von .textInputError gilt alles.

Ok dann halt. Hat mich doch ziemlich verwirrt. ;)

Gruß, Don P

[Matthias Apsel]

Om nah hoo pez nyeetz, Don P!

Jetzt wundert mich trotzdem noch, warum mir die Debug-Tools die widersprüchlichen Regeln als aktiv darstellen.

aus der einen Regel border-width und border-style und nur border-color wird überschrieben.

Matthias