CSS Anpassungen bei verschiedenen Browsern

[ManU.K]

Hallo,

ich habe folgendes Problem:

Ich habe einige CSS Anpassungen in Chrome vorgenommen, wo alles gut aussieht. Sobald ich aber den Browser wechsle (z.B. auf Firefox oder Safari) sieht alles verschoben aus. Dabei sind es ganz einfache Anpassungen (z.B. Button, div-Box usw.). Außerdem werden einige CSS Änderungen nicht in allen Browsern gespeichert. Wie kann das sein?

Edit: Ich habe gerade gemerkt, dass je nachdem ob ich bei Wordpress angemeldet bin oder nicht, gewisse CSS Einstellungen übernommen werden.

Bin noch Neuling in dem Gebiet, wäre also super, wenn ihr mir helfen könntet. Danke!

[marctrix]

Hej ManU.K,

Ich habe einige CSS Anpassungen in Chrome vorgenommen, wo alles gut aussieht. Sobald ich aber den Browser wechsle (z.B. auf Firefox oder Safari) sieht alles verschoben aus. Bin noch Neuling in dem Gebiet, wäre also super, wenn ihr mir helfen könntet. Danke!

So wird das leider nichts, denn wir wissen weder, wo du Änderungen gemacht hast, noch welche das sind. Es gibt tatsächlich einige (wenige) CSS-Eigenschaften, die noch nicht alle Browser beherrschen. Wir wissen aber nicht einmal, ob du mit aktuellen Browsern testest.

Daher solltest du die Änderungen einzeln beschreiben und uns sagen, wie und wo du die Änderungen vorgenommen hast. Wenn du sagst, dass die manchmal gespeichert werden und manchmal nicht, dann änderst du manchmal vielleicht etwas in den Entwicklerwerkzeugen? Das sind nur temporäre Änderungen zu Testzwecken.

Wenn du die dauerhaft speichern möchtest, solltest du die in Deine CSS-Datei kopieren.

Was Wordpress angeht: Änderungen nimmt man möglichst in einem Child-Theme vor...

Marc

[ManU.K]

[Vollzitat entfernt]

Erstmal danke für die Antwort.

Es ist schwer alles zu erklären, weil ich grad ziemlich verwirrt bin. Aber ich versuchs mal. Ich habe alle Anpassungen folgendermaßen vorgenommen:

Ich habe zunächst mithilfe der "Untersuchen-Funktion" bei Chrome die gewünschten Anpassungen vorgenommen und anschließend den CSS-Code in das Plugin "Simple Custom CSS" kopiert. Das hat alles wunderbar geklappt. Wenn ich die Seite neu geladen habe, waren die Änderungen gespeichert.

Ich habe z.b. unterhalb des Logos und der Navigation eine Box(=container). In dieser habe ich einen Text (links), rechts daneben habe ich eine kleinere Box (=Box1) eingefügt mit Text + einen Button unten links vom Container.

Wenn ich bei wordpress angemeldet bin, stimmen (inzwischen) alle Änderungen überein. Dabei sind folgende Sachen seltsam:

Bei Chrome:

Wenn ich nicht in Wordpress angemeldet bin, erscheint immer noch neben dem Text, aber verliert komplett ihre Form. Sie ist länger und schmaler, als wenn ich in Wordpress angemeldet bin.

Bei Safari: Gleiche Geschichte, jedoch ist die Box noch schmaler und länger (Aber wieder nur, wenn ich nicht angemeldet bin).

Bei Firefox: Die Box verliert ihren border und ihre Hintergrundfarbe.

Hier der Code:

#text1 {
    float: left;
  	width:900px;
}


#box {
    margin-left: auto;
    margin-right:auto;
    border-radius: 8px;
    border: 1px solid #5E3D2C;
    background-color: rgba(245, 238, 48, 0.27);
    border-width: 3px 0px 3px 0px;
    float: left;
    margin-top: 90px;
}

[Matthias Apsel]

Hallo ManU.K,

Wenn ich bei wordpress angemeldet bin, stimmen (inzwischen) alle Änderungen überein. Dabei sind folgende Sachen seltsam:

Wenn man als Admin in WP angemeldet ist, sieht man immer sofort alle Änderungen. Diese Änderungen werden für normale User nicht sofort dargestellt, weil WP das CSS mit einem Ablaufdatum ausliefert, sodass die Browser keine neue Version bekommen, wenn das Datum noch nicht erreicht ist. Du musst also den Cache löschen, wenn du Änderungen für alle Nutzer sofort haben möchtest. Wie das geht, ist abhängig von den installierten Plugins.

Du solltest außerdem nicht im Original-Theme herumändern, weil nach einem Update alle deine Änderungen wieder perdu sind. Verwende ein Child-Theme.

Bis demnächst
Matthias

[marctrix]

Hej ManU.K,

[Vollzitat entfernt]

Ich habe zunächst mithilfe der "Untersuchen-Funktion" bei Chrome die gewünschten Anpassungen vorgenommen und anschließend den CSS-Code in das Plugin "Simple Custom CSS" kopiert. Das hat alles wunderbar geklappt. Wenn ich die Seite neu geladen habe, waren die Änderungen gespeichert.

Ein extra PlugIn ist ein extra Sicherheits-Risiko.

Im Wordpress-Backend/Dashboard gibt es in dem linken Menü einen Punkt "Design", darin "Editor" - standardmäßig wird die Datei style.css angezeigt (sonst aus der Dateiliste am rechten Seitenrand auswählen).

Dort kannst du die Styles aus der "Untersuchen"-Funktion auch kopieren - geht auch wunderbar, aber ohne PlugIn.

Wie von mir und Matthias bereits gesagt: mach das in einem Child-Theme!

Oder hier, wenn es auf deutsch sein soll und nicht die offizielle Doku sein muss...

Nachdem ich die Antwort von Matthias gelesen habe, fiel mir noch ein: hast du ein Cache-PlugIn installiert oder die Beschleunigen-Funktion im Jetpack aktiviert? Dann kann es sein, dass WP eine Version aus dem Cache ausliefert...

Hier der Code:

#text1 {
    float: left;
  	width:900px;
}

Die Hälfte (oder mehr) aller Menschen surft mit dem Smartphone - auch wenn die immer größer werden, 900px breite Boxen können nicht einmal die unter ihnen darstellen, deren Displays 900px oder mehr hergeben...

Über die Verwendung von Pixel solltest du generell noch mal nachdenken (mit dem Ergebnis eine andere, relative Maßeinheit zu nutzen)...

Marc

[Gunnar Bittersmann]

@@marctrix

Was Wordpress angeht: Änderungen nimmt man möglichst in einem Child-Theme vor...

Da kann man sich den Mund fusslig reden.

LLAP 🖖

[ManU.K]

Erstmal vielen Dank für eure Tipps!!!

Der Mensch ist bekanntlich ein Gewohnheitstier, hab noch nie mit einem Child-Theme gearbeitet :) Das Plugin Simple Custom CSS ist sehr gut bewertet, weswegen ich mich darauf verlasse. Außerdem werden die Änderungen nicht verworfen, weil Sie weiterhin im Plugin gespeichert sind. Deswegen komme ich weiterhin drumrum ein Child-Theme zu installieren, oder?

Das Löschen des Cashes hat das Problem schon gelöst. Alles wird korrekt angezeigt, egal ob ich bei Wordpress angemeldet bin oder nicht.

Den Tipp mit den Größenangaben werde ich ebenfalls berücksichtigen, habe mir die Seite auch gerade auf dem Smartphone angeschaut.

Vielen Dank!

[marctrix]

Hej ManU.K,

Erstmal vielen Dank für eure Tipps!!!

Nicht dafür, freut mich, wenn dir bei deinem konkreten Problem geholfen ist.

Die anderen Dinge lässt du dir einfach noch mal in Ruhe durch den Kopf gehen. Hier will dir keiner unnötig Arbeit machen. Was dir hier geraten wird, hat immer einen Sinn - manchmal einen nicht ganz offensichtlichen ;-)

Marc