Kleines CSS Problem
Eingetragen von JThan (396)am 13.04.2009 - 23:56 Uhr in
Hallo.
Leider kann ich dieses Problem nicht lösen - ich hoffe mir kann jmd. kurz auf die Sprünge helfen. In FF geht alles mal wieder wie geplant - nur der IE macht Probleme und ich weiß nicht warum.
Ich habe das Mathe Captcha eingestellt. Die Aufgabe wird im FF linksbündig angezeigt, wegen folgendem CSS Tag dass sich genau auf diese Ausgabe bezieht:
.form-item span.field-prefix
{
text-align:left;
}Im IE klappt das leider nicht. Wenn ich die DeveloperToolbar benutze, zeigt er an: "text-align: justify". Okay, aus irgendeinem Grund nimmt er die Definition oben nicht an. Wenn ich aber über rechtsklick und "Trace Style" gehe, springt er zu dem oben genannten CSS Code.
Der W3C CSS Vali läuft mit Warnungen (keine Fehler) durch, von denen aber imho keine in Zusammenhang mit dieser Darstellung steht. HTML ist ebenfalls valide.
Ich wäre dankbar, wenn mir einer erklären könnte, woran es liegt, das der FF das text-align:left annimmt, der IE aber den Blocksatz (justify) behält. Selbst wenn ich im IE über die DevToolBar die Anweisung hinzufüge, passiert nichts. Es wird autamtisch ein !important hinzugefügt, aber der IE weigert sich einfach.
Falls weitere Angaben hilfreich sein könnten, bitte fragen. Die Seite ist hier zu finden: Link zur problembehafteten Seite
Vielen Dank fürs Lesen.
Gruß
JThan
- Anmelden oder Registrieren um Kommentare zu schreiben
Versuchs mal anstatt
am 14.04.2009 - 02:39 Uhr
Versuchs mal anstatt text-align:left; -> display:block;
mfg ViTok
Ein Gedankengang
am 14.04.2009 - 07:50 Uhr
Du möchtest Anweisungen, die du bei der Klasse PostContent gemacht hast, überschreiben. Dies funktioniert erstmal grundsätzlich nur, wenn die neuen Anweisungen nach PostContent kommen und nicht vor.
Um dein Problem zu lösen, müsstest du nachfolgenden Code als letztes in dein CSS-Datei eintragen, oder zumindest hinter PostContent.
.PostContent form fieldset .form-item {text-align: left;
}
Würde die Matheaufgabe in einem DIV sitzen, wäre es problemlos möglich, deine Anweisungen umzusetzen. Da Captcha aber ein SPAN vorgibt, musst du über das form fieldset gehen.
Wahrscheinlich erachtet der IE den SPAN-Tag als zu geringfügig, um dessen Formatierung zu beachten.
Möchtest du explizit nur das Captcha-Feld ansprechen, dann:
#edit-captcha-response-wrapper {text-align: left;
}
rainman schrieb Um dein
am 14.04.2009 - 16:40 Uhr
Um dein Problem zu lösen, müsstest du nachfolgenden Code als letztes in dein CSS-Datei eintragen, oder zumindest hinter PostContent.
.PostContent form fieldset .form-item {text-align: left;
}
rainman, danke, das hat geholfen. mein Denkfehler war also, dass ich das überschreiben nicht auf .PostContent bezogen habe, sondern nur auf das span Element. So richtig hundertprozentig verstanden hab ichs noch nicht, aber die Richtung ist klar geworden.
Vielen Dank euch beiden für die Antworten und die schnelle und gute Hilfe :)
Gruß
JThan
_____
--> http://www.drupalcenter.de/showroom/11994 <--
Alle Angaben in meinen Beiträgen sind stets ohne Gewähr und auf eigenes Risiko für bare Münze zu nehmen.
kein Denkfehler
am 14.04.2009 - 17:42 Uhr
mein Denkfehler war also, dass ich das überschreiben nicht auf .PostContent bezogen habe, sondern nur auf das span Element.
Nein, du hattest keinen Denkfehler, nur ein zu kleines Element benutzt. Mein verwirrender Satz war eigentlich nur grundsätzlich gemeint.
... Dies funktioniert erstmal grundsätzlich nur, wenn die neuen Anweisungen nach PostContent kommen und nicht vor.
Zur Erklärung: Mir war beim durchsehen deiner style.css aufgefallen, dass du die Anweisungen für das SPAN ganz oben eingesetzt hattest. Nachfolgende Anweisungen überschreiben immer das voran gestellte. Um Fehler zu vermeiden, sollte man seine gewünschten Änderungen immer ans Ende der CSS-Datei setzen.
SPAN mit CSS zu formatieren ist immer ein wenig Fehleranfällig in Bezug auf IE. Wenn so etwas passiert, muss man sich den übergeordneten Punkt suchen. In dem Fall die ID edit-captcha-response-wrapper,
#edit-captcha-response-wrapper {text-align: left;
}
oder höher und damit ungenauer über form und dann spezifizieren. Da ich nicht wusste, ob du noch weitere Inhalts-Klassen vergeben hast, habe ich der ganze Sache noch ein .PostContent vorgesetzt. Es würde aber auch ohne funktionieren.
form fieldset .form-item {text-align: left;
}
Hallo. Super Erklärung.
am 14.04.2009 - 19:53 Uhr
Hallo.
Super Erklärung. Jetzt hab auch ichs kapiert.
Vielen Dank :)
Gruß
JThan
_____
--> http://www.drupalcenter.de/showroom/11994 <--
Alle Angaben in meinen Beiträgen sind stets ohne Gewähr und auf eigenes Risiko für bare Münze zu nehmen.