Schrift durchgestrichen bei schmalem Display

[Cristal]

Hallo liebe Contao User,

ich habe folgendes Problem. Ich habe von der Seite https://themes.contao.org/de/ das Template Healt Navigator gekauft. Meine Inhalteselemente/ Texte habe ich angepasst.
Wenn ich nun die seite vom Handy aus betrachte oder mein Browserfenster verkleinre, wird die Schrift bei schmalen ansichten komplett durchgestrichen.

Könnt ihr mir einen Tipp geben wie ich dieses Verhalten ändern kann?

Liebe Grüße

Cristal

[Kahmoon]

Ohne einen Link zu deiner Seite wird das niemand beantworten können bzw. man kann nur raten.

[Cristal]

ich mal wieder...

http://kosmetik-schoenmacherei.de/index.php/home.html

[Kahmoon]

In einem deiner Stylesheets, vermutlich einem der Mediaqueries , wird der Text im body bei einer Seitenbreite von kleiner 765px auf durchgestrichen "text-decoration: line-through;" gesetzt. Das musst du entfernen.

body {
    background-color: #dda0dd;
    color: #574844;
    font: 300 18px/2.6rem "Open Sans",Arial,Verdana,sans-serif;
    text-decoration: line-through;


}

[Spooky]

Sehr kurios. In der layout.css befindet sich folgender Style:

body {
    background-color:#DDA0DD;
    font:18px "Open Sans",Arial,Verdana, sans-serif;
    text-decoration:line-through;
    color:#574844;
    font-weight: 300;
    line-height: 2.6rem;
} 

Das text-decoration:line-through; gehört natürlich weg. Warum das aber nur unter 768px passiert habe ich partout auch nicht herausgefunden.

[Kahmoon]

@spooky
Wie kannst du die CSS Files unterscheiden? Firebug zeigt mir nur das Zusammengefasste.

[Spooky]

@spooky
Wie kannst du die CSS Files unterscheiden? Firebug zeigt mir nur das Zusammengefasste.

Warum benutzt du Firebug? Nimm die Developer Tools.

Davon abgesehen habe ich das direkt hier analysiert.

[Kahmoon]

*Facepalm*
Ist mir noch nie aufgefallen dass das jeweile CSS File als Kommentar drin steht

[Spooky]

*Facepalm*
Ist mir noch nie aufgefallen dass das jeweile CSS File als Kommentar drin steht

Firebug versteckt die vor dir.

Mir sind keine Vorteile von Firebug gegenüber den reuglären Developer Tools bekannt, nur Nachteile.

[Kahmoon]

Aber ein Element untersuchen muss ich ja mit Firebug oder andernfalls Chrome Webmaster Tools

[Spooky]

Aber ein Element untersuchen muss ich ja mit Firebug oder andernfalls Chrome Webmaster Tools

Nein, außer du verwendest uralte Browser. In allen aktuellen Browsern geht das mit "Rechtsklick - Element untersuchen" (genauer Name des Kontext-Menüpunktes unterscheidet sich evt. von Browser zu Browser).

[Andreas]

Wie kannst du die CSS Files unterscheiden? Firebug zeigt mir nur das Zusammengefasste.

Nein, das CSS rechts in dem HTML-Tab ist genauso aufbereitet wie der DOM auf der linken Seite. Links siehst du nicht den HTML-Quelltext und rechts nicht die CSS-Datei. Die CSS-Datei siehst du im Tab CSS, einmal aufbereitet und bei Klick auf "Bearbeiten" den echten Quelltext der CSS.

[Andreas]

Firebug versteckt die vor dir.

Mir sind keine Vorteile von Firebug gegenüber den reuglären Developer Tools bekannt, nur Nachteile.

Wie oben bereits erwähnt, versteckt Firebug da nichts, es ist nur etwas anders angeordnet als in den Dev-Tools.

Firebug hat ein paar Optionen, welche die Dev-Tools noch nicht haben:

• Die Javascriptumgebung direkt in der Console
• Clearen der Console vor Ausführung des mehrzeiligen JS-Codes mit clear()
• Kommentare im DOM ausblendbar
• Textknoten im DOM kompl. anzeigbar (optional)
• Kompleter Ast im DOM auf- und zuklappbar mit Shortcut STRG+*
• Filterfunktionen (z.B. im Netzwerk) haben eine show-only-Logik und keine show-auch-Logik
• Die Dev-Tools verstecken das CSS von Stylish, obwohl es auf der Seite greift

Die sind mir gerade spontan eingefallen.

Andere Software hat eben auch andere Möglichkeiten. Wenn man zu viele altgewohnte Möglichkeiten in einer neuen Software vermisst, fällt der Umstieg nicht gerade einfach.

Allerdings haben sich die Dev-Tools im FF ganz schön weiterentwickelt und sind auch richtig gut geworden, in einigen Bereichen wahrscheinlich auch besser als Firebug.

[Spooky]

Die Javascriptumgebung direkt in der Console

Was genau meinst du damit? In der JavaScript Konsole hast du auch ohne Firebug die JavaScript 'Umgebung'.

Clearen der Console vor Ausführung des mehrzeiligen JS-Codes mit clear()

Das ist eine reguläre JavaScript Funktion, die gibt es daher in jeder JavaScript Konsole.

Kompleter Ast im DOM auf- und zuklappbar mit Shortcut STRG+*

In den FireFox Developer Tools navigiert man durch den DOM bspw. mit den Pfeiltasten.

Filterfunktionen (z.B. im Netzwerk) haben eine show-only-Logik und keine show-auch-Logik

Was genau meinst du damit?

[Andreas]

1. Die JS-Umgebung öffnet sich in einem neuen Fenster. Man kann sie nicht ins Window integrieren und auch nicht auf immer im Vordergrund stellen.

2. In den Dev-Tools funktioniert das (console.)clear() nur in dieser einzeiligen Commandline unterhalb der Log-Ausgabe der Console. Da kann man zwar auch mehrzeilig coden, aber mit Enter wird der Code ausgeführt und verschwindet. Ist dann nur noch über die History wieder hervorholbar. Wenn ich also mehrzeilig coden möchte, dann muss ich die JS-Umgebung aufrufen. Und dort funktioniert dann das clear() nicht.

Im Firebug hingegen kann ich rechts neben der Logausgabe mehrzeilig coden integriert ins Window mit funktionierendem (console.)clear().

3. Ja, ich weiß das mit den Pfeiltasten, aber wenn ich einen Ast komplett aufklappen möchte, kann ich das nur über Kontext "Alle erweitern". Außerdem bin ich auch noch gewohnt mit Doppelklick auf einen Knoten diesen aufzuklappen, mit den Dev-Tools geht das nicht, da muss ich diesen kleinen Pfeil treffen, wenn ich mit der Maus arbeiten möchte.

4. Z.B. im Tab Netzwerk, hast du die Filter Alles, HTML, CSS, JS.... Wenn das jetzt auf Alles steht und ich möchte nach CSS filtern, klicke ich auf CSS und sehe nur CSS. Wenn ich dann nur JS sehen will, klicke ich auf JS, ich sehe dann auch JS, aber zusammen mit CSS. Ich muss dann nochmal auf CSS klicken um CSS wieder zu verstecken. Mit show-only meinte ich, dass man bei Klick dann only CSS, JS usw. sieht, so wie im Firebug. Mit show-auch meinte ich das wie es in den Dev-Tools ist, wenn ich da z.B. nach JS filtere, sehe ich nicht nur JS, sondern auch noch andere aktivierte Kategorien.

Versteh mich nicht falsch, ich finde die Dev-Tools sind mittlerweile nach all den Jahren wirklich gut gelungen, aber da du hier immer wieder den Leuten erzählst, sie sollen Firebug deinstallieren, muss ich den mal ein wenig in Schutz nehmen. Wer gewohnt ist damit zu arbeiten, kann einige Sachen etwas komfortabler erledigen als mit den Dev-Tools. Und ich finde auch für Einsteiger ist FB besser zu verstehen. Ich selber versuche jetzt nur noch mit den Dev-Tools zu arbeiten, einfach um mir ein Addon zu sparen. Aber hin und wieder aktiviere ich dann doch wieder Firebug.

[mlweb]

Ich arbeite seit einiger Zeit auch fast nur noch mit den dev-tools. Es gab aber Situationen, da habe ich den Firebug oder die Webdeveloper Tools genutzt. Einfach weil ich dort genau wusste, wo ich die gerade gesuchte Funktionalität finde. Das heißt aber nicht, dass diese bei den dev-Tools nicht da ist. Ist halt viel Gewöhnung bei der Nutzung von Werkzeug dabei. Den Firebug habe ich jetzt nach einem Rechnertausch erstmalig nicht mehr parallel installiert.

[Spooky]

@Andreas: was meinst du mit "JS-Umgebung"?

Mehrzeilig Coden kann man in allen Developer-Tools, ja.

4. Z.B. im Tab Netzwerk, hast du die Filter Alles, HTML, CSS, JS.... Wenn das jetzt auf Alles steht und ich möchte nach CSS filtern, klicke ich auf CSS und sehe nur CSS. Wenn ich dann nur JS sehen will, klicke ich auf JS, ich sehe dann auch JS, aber zusammen mit CSS. Ich muss dann nochmal auf CSS klicken um CSS wieder zu verstecken. Mit show-only meinte ich, dass man bei Klick dann only CSS, JS usw. sieht, so wie im Firebug. Mit show-auch meinte ich das wie es in den Dev-Tools ist, wenn ich da z.B. nach JS filtere, sehe ich nicht nur JS, sondern auch noch andere aktivierte Kategorien.

Wo ist da jetzt der Vorteil bei Firebug?

[Andreas]

@Andreas: was meinst du mit "JS-Umgebung"?

Mehrzeilig Coden kann man in allen Developer-Tools, ja.

Die Dev-Tools haben einen Button "JavaScript-Umgebung".

Dann bräuchte ich eine Anleitung, wie man in der Konsole mehrzeilig programmiert. Wenn du z.B. das hier

console.clear();
console.log('test');

in die Zeile ganz unten in der Konsole einträgst, dann wird der Code, wenn du Enter drückst, ausgeführt und verschwindet dann wieder. Ich kann sie erst wieder sehen, wenn ich die Pfeil-nach-oben-Taste drücke. Wenn ich den Code dann nochmal ausführe, wird die Log-Ausgabe nicht geleert. Wenn ich anstatt console.clear() nur clear() benutze, dann wird das Log-Fenster geleert, aber der 2. Befehl console.log('test') wird nicht ausgeführt bzw. es ist nichts in der Konsole zu sehen.

[Spooky]

Die Dev-Tools haben einen Button "JavaScript-Umgebung".

Von welchem Browser genau und wo genau? Finde den momentan nicht, zumindest im FireFox.

Dann bräuchte ich eine Anleitung, wie man in der Konsole mehrzeilig programmiert.

Mit Shift+Enter.

Wenn du z.B. das hier

console.clear();
console.log('test');

in die Zeile ganz unten in der Konsole einträgst, dann wird der Code, wenn du Enter drückst, ausgeführt und verschwindet dann wieder.

Er "verschwindet" ja nicht - er wird einfach ausgeführt und du kannst dann, wenn du es wieder brauchst, über die History wieder aufrufen, oder aus der Console kopieren. Im IE11/Edge "verschwindet" der Code übrigens nicht.

Wenn ich den Code dann nochmal ausführe, wird die Log-Ausgabe nicht geleert.

Falls du das im Firefox machst: dort gibt es console.clear() nicht. Daher passiert auch nichts.

Wenn ich anstatt console.clear() nur clear() benutze, dann wird das Log-Fenster geleert, aber der 2. Befehl console.log('test') wird nicht ausgeführt bzw. es ist nichts in der Konsole zu sehen.

Dürfte wohl eine Eigenheit bzw. Bug von Firefox sein. Im Chrome oder IE11 (letzeres mit console.clear()) ginge das.

[Andreas]

Es ging immer nur um die Dev-Tools im Firefox, wegen Vergleich mit Firebug.

JS-Umgebung ist hier der 4. Button von links. dev-tools.png

Shift-Enter in der Kommandozeile weiß ich, aber das Verhalten im Firebug finde ich einfach besser. Du hast dort direkt eine immer sichtbare mehrzeilige Kommandozeile, welche sich auch nicht nach der Ausführung leert. Dass ich den Code mit den Pfleiltasten über die History wieder sichtbar machen kann, hatte ich ja erwähnt.

Übrigens kann ich mit Firebug im Firefox in dieser mehrzeiligen Kommandozeile die Logausgabe sowohl mit clear() als auch mit console.clear() leeren. Scheint es also doch in Firefox zu geben. Deswegen hatte ich mir angewöhnt vor meinen Code in die erste Zeile immer clear(); zu schreiben.

Übrigens will ich nicht sagen, dass der Firebug perfekt ist. Gerade die Kommandozeile im FB könnte noch ein paar Feature gebrauchen, z.b. Scripts zu speichern. Und der Text in dieser Zeile lässt sich auch gerade mit der Maus irgendwie seltsam handhaben.

Welche groben Nachteile siehst du denn im Firebug, dass du immer wieder empfiehlst ihn zu deinstallieren und nur noch die Dev-Tools zu benutzen?

[Spooky]

JS-Umgebung ist hier der 4. Button von links. dev-tools.png

Achso, du meinst das JavaScript Scratchpad. Da kann ich leider nichts dazu sagen, damit habe ich noch nie gearbeitet.

Welche groben Nachteile siehst du denn im Firebug, dass du immer wieder empfiehlst ihn zu deinstallieren und nur noch die Dev-Tools zu benutzen?

Meiner Erfahrung nach ist er vergleichsweise langsam und er versteckt bei default Kommentare in CSS Dateien, was es manchen Leuten in der Vergangenheit schwierig gemacht hat herauszufinden, welche Styles aus welchen internen Stylesheets kommen (ein Umstand der aber sowieso nicht mehr so wichtig ist). Aber vielleicht hat sich da ja auch etwas bei Firebug getan.

[Andreas]

Die Möglichkeiten das originale CSS mit Kommentaren zu sehen gab es schon immer. Hier mal 2 davon.
firebug-css.png
firebug-html-css.png

[Spooky]

Mir ging es um den Fall im ersten Screenshot. Also um folgenden Workflow: Rechtsklick auf ein Element » Inspect Element with Firebug » Im Style Tab auf die Datei und Zeilenangabe eines Selektors klicken. Dort siehst du die Kommentare nicht. Nur wenn du oben dann auf "Source edit" klickst - aber dann bist du nicht mehr in der Zeile wo sich der Selektor befindet. Dort sieht man dann einfach nur den Quellcode der jeweligen CSS Datei.

[Andreas]

Ja, das ist ein etwas anderer Ansatz. Ich brauche das eigentlich nie, mir reicht es, dass ich da im HTML-Tab rechts experimentieren kann und dann den Namen der Quelldatei mit Zeilennummer sehe, da ich meine Dateien ja im Editor geöffnet habe.