CSS Code voll vermurkst :(

Webdesign & Technik HTML & CSS
1

Hallo

Meine Seite besitzt ja einen Editor zum schreiben von neuen Beiträgen. Jedoch ist es eine Qual mit dem zu arbeiten. Löscht man ein Wort springt der Editor zu Schriftgröße 10 oder 12 und weißer Farbe, Der rest vom Text wird zusammengeschoben. Farben und Formatierungen werden nicht korrekt übernommen oder müssen sehr oft neu eingestellt werden weil sich was ändert. Anfangs hab ich den Editor die Schuld gegeben bis das wort CSS fiel. Da ich mich in CSS nicht auskenne wollte ich fragen was hier falsch ist. Anscheinend einiges. Der CSS Validator hat nur 2 Fehler gefunden die ich an dem Problem leider nichts verändern.

Ich habe auf pastebin den CSS Code hinterlegt. Ich hoffe das ist der richtige von template.css

pastebin.com/9C0r6247

Ich möchte nur das der Editor nie was umändert. Word ändert ja auch nicht die Schriftfarbe wenn ich eine Zeile lösche.

2

Nach kurzem Blick würde ich sagen, das einzige, was sich da interaktiv per CSS ändern sollte,
sind Inhalte von a-Elementen (Verweise) und zwar per :hover - drüberfahren mit der Maus, nicht
beim Ändern von Formularinhalten.
Denn wenn du irgendeinen Text eingibst, steht der in einem Formular.
Formularelemente werden aber wiederum nicht innerhalb von a-Elementen notiert, von daher
können wir erstmal davon ausgehen, daß die Probleme nicht an dieser Stilvorlage liegen.
Genaueres kann man natürlich nur sagen, wenn man das zugehörige (X)HTML-Dokument
sieht.

CSS-Eigenschaften können gegebenenfalls natürlich auch per java-script über das DOM
manipuliert werden, auch massiv interaktiv. Um das auszuschließen, könntest du einfach -
soweit nicht bereits geschehen - die Interpretation von java-script deaktiveren. Treten die
Änderungen dann nicht mehr auf, wird es wohl daran liegen.

Bei der Stilvorlage kannst du allenfalls schonmal pauschal alle Angaben mit ‘font-size: ?px’
(und ‘line-height: ?px’) herausnehmen, wobei ? für eine Zahl steht - denn Angaben in Pixel
sind für die Schriftgröße ohnehin unsinnig. Wenn schlicht die Voreinstellung des Nutzers
verwendet wird, sollte sich die Schriftgröße auch gar nicht mehr auf unsinnige Werte ändern ;o)

Als Textfarbe kommt öfter mal ‘color: #FFFFFF’ vor, für das Pseudoformat :hover kannst du
das natürlich testweise auf was anderes setzen, etwa rot: ‘color: red’ und dann gucken, ob
du die Anweisung gefunden hast, die etwas mit dem Problem zu tun hat - wenn das eintrifft,
ist vermutlich dein (X)HTML-Quelltext fehlerhaft, würde ich mal tippen …
Validator dann erstmal das (X)HTML testen lassen oder hier eine URI angeben.

3

ok ich habe jede Zeile die font-size beinhaltet rausgelöscht. Der Fehler besteht jedoch weiterhin. Zusätzlich sind die Links größer geworden.

Was bedeuten diese ganzen Sachen überhaupt?
.footer
.content usw

Total viele Sachen wo ich nicht durchblicke.

Ich hab auch die html Datei auf pastebin hochgeladen. Vielleicht gibt die Aufschluss.

pastebin.com/cKEELeBr

4

Was du hochgeladen hast, ist ein PHP-Skript, das bindet vermutlich weitere Skripte und Inhalte
ein. Daran allein kann man also nicht so viel erkennen, das Skript erzeugt dann erst die
(X)HTML-Ausgabe, auf welche das CSS und das java-script wirkt - man muß sich also wirklich
die Ausgabe angucken, um zu verstehen, worauf das CSS genau wirkt.
Zudem refenziert es wie vermutet eine Datei mit java-script, die alles mögliche mit deinem Editor
anstellen kann, wenn du das nicht deaktivierst, was bei einem schlecht konzipierten Projekt
aber auch dazu führen mag, daß der Editor selbst nicht (mehr) funktioniert - jedenfalls
vermutlich anders als zuvor. Ohne die Wirkung von solch einem java-script ist so kaum
vorstellbar, daß sich plötzlich bei Änderungen von Text Schriftgrößen und -farben ändern
oder sogar Text zusammengeschoben wird, was ohnehin ein Effekt ist, der sonst gar nicht so
einfach erreichbar ist, wenigstens nicht mit dem, was da in der CSS-Datei steht.

Meine Vermutung geht dahin, daß dein Editor vor allem auf java-script, AJAX etc basiert und
den Murks fabriziert, nicht das CSS oder (X)HTML selbst. Deine anfängliche Vermutung, daß der
Editor nichts taugt, wird also wohl richtig sein ;o)

In der CSS-Datei bedeutet ‘.footer’ im (X)HTML-Quelltext, den das PHP-Skript erzeugt, ein
Element der Klasse ‘footer’, da findet man dann also in der Elementanfangsmarkierung das
Attribut class=“footer”, aber auch sowas wie class=“footer dingsbums” oder class=“dingsbums
footer” etc. Die CSS-Anweisung wirkt auf solche Elemente, ändert also die Darstellung von
Elementen, die zur Klasse ‘footer’ gehören, mehr dazu in jeder Anleitung zu CSS ;o)

Wenn die Schrift bei dir größer wird, wenn du Anweisungen mit font-size rausnimmst, bedeutet
das einfach, daß du an deinem browser eine andere, größere Schriftgröße eingestellt hast, um
alles besser lesen zu können, die gelöschte Anweisung hat dann deine Bemühungen zur
guten Lesbarkeit zunichte gemacht, indem dort eine kleinere Schriftgröße angegeben wurde.
Wenn man überhaupt, etwa für Überschriften, Schriftgrößen festlegen will, kann man dazu etwa
eine Einheit wie ‘em’ statt ‘px’ verwenden, 2em entsprechen dann der doppelten eingestellten
Schriftgröße etc.

5

ok, wo finde ich die xhtml Datei? Hab einfach ein Backup gemacht damit alles aussieht wie vorher. Irgendwie war die Seite komplett grün nachdem ich das mit Hover eingestellt hab.

Edit: Hab glaub ich die Dateien des Editors gefunden.

JCE Editor PhP pastebin.com/Js61ceKU
JCE Editor xml pastebin.com/B8XtjVWd