Favicons in Lesezeichenmenüs Größe anpassen

  • Hallo, ich habe noch ein kleines "Problem".

    Wenn ich den Zeilenabstand in den Lesezeichenmenüs verringere, werden die Favicons mindestens in der Höhe skaliert.

    Und die Ausrichtung stimmt nicht mehr, Icon und Text sind nicht mehr auf einer Höhe.

    Extrembeispiel mit 18px Zeilenhöhe (so knapp soll das nicht werden, hier nur zur Verdeutlichung):

    Bisher gefundenen CSS-Code dazu:

    Die Skalierung fängt schon bei relativ großen Zeilenhöhen (ca. 25 px) an.

    Wie kann ich den Zeilenabstand verringern, ohne das die Icons skaliert werden?

    Schonmal Danke für die Hilfe! :)

    FF 115.x ESR auf Win10 Pro 64bit

    FF 115.x ESR auf Linux Mint

    Einmal editiert, zuletzt von Thomas S. (26. Juli 2019 um 18:52) aus folgendem Grund: Code korrigiert

  • Hallo Andreas.

    Codefehler war ein Kopierfehler hier her... :saint:

    Ich habe mal die Sidebar und das Menü zusammen dargestellt, beides mit Zeilenhöhe 20px, wie es sein soll.

    Die Favicons im Menü sind erheblich kleiner (in der Höhe gestaucht) und scheinbar nach oben verschoben.

    Kann die Skalierung der Favicons überschrieben / abgestellt werden?

    FF 115.x ESR auf Win10 Pro 64bit

    FF 115.x ESR auf Linux Mint

  • Vorweg, in Zeile 15 fehlt die 2te }

    So? Die Klammern sind in Zeile 16 und 17.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • Er hat sie nachträglich eingesetzt ;)

    Richtig. Und korrekt im Edit erwähnt, Zitat: "Einmal editiert, zuletzt von Thomas S. (Vor 17 Minuten) aus folgendem Grund: Code korrigiert".

    Und auch bei mir gilt:

    Fehler, die ich mache und die andere finden können von denen gerne behalten werden... 8)

    FF 115.x ESR auf Win10 Pro 64bit

    FF 115.x ESR auf Linux Mint

  • Ich vermute mal dieser.


    #54

    Eindeutig nein.

    Nur dieser komplette Code in der userChrome.css (schon etwas modifiziert wegen der Tests) zeigt dieses Verhalten.

    FF 115.x ESR auf Win10 Pro 64bit

    FF 115.x ESR auf Linux Mint

  • War der derzeitige Stand nur zum Testen, kann auch rausgenommen werden, ändert nix.

    Ich stocher da ein weinig im Nebel herum...

    FF 115.x ESR auf Win10 Pro 64bit

    FF 115.x ESR auf Linux Mint

  • Nur dieser komplette Code in der userChrome.css (schon etwas modifiziert wegen der Tests) zeigt dieses Verhalten.

    Du solltest Codes in CSS-Dateien auslagern, Codes für unterschiedliche Zwecke in unterschiedliche Dateien. Auf diese Dateien wird in der userChrome.css mit einem @import-Befehl Bezug genommen. Bei Problemen kannst du durch Deaktivieren des @import-Befehls den Übeltäter-Code leicht herausfinden, ohne meterlangen Code mehrfach durchsehen zu müssen, was sehr fehleranfällig ist.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress

  • Noch nicht notwendig.

    Meine eigentlich fast fertige userChrome.css hat gerade 290 Zeilen inkl. vieler Kommentare und Variablen.

    Das lohnt nicht wirklich, ist noch sehr übersichtlich.

    Bei den *.uc.js mache ich das schon, klar.

    Hier teste ich auch nur mit den paar Zeilen herum, da wird nichts von anderem (nicht existentem) Code beeinflußt.

    FF 115.x ESR auf Win10 Pro 64bit

    FF 115.x ESR auf Linux Mint

  • Es geht hier zwar auch um die Ausrichtung von Favicon und Text, aber im Wesentlichen erst einmal um die automatische Skalierung (Verkleinerung bzw. Stauchung) der Favicons. Bei mir ist das unter Linux und Win7 identisch der Fall, wenn ich nur die Zeilenhöhe (und nur die) per CSS verkleinere.

    Dein kompl. Code sieht hier so aus:

    Und da passt alles.

    Hmmm, nicht wirklich.

    Auch in Deinem Menü sind Favicon und Text nicht (mehr) zueinander mittig ausgerichtet.

    Der Text ist deutlich niedriger als das Icon.

    Die Frage ist also, wie man hier welche notwendigen Parameter adressieren kann.

    FF 115.x ESR auf Win10 Pro 64bit

    FF 115.x ESR auf Linux Mint

  • Teste bitte mal:

  • Ja, das geht in die richtige Richtung.

    Allerdings funktioniert im Wesentlichen der unterste Block, mit dem ich die Favicons wieder "entzerren" konnte.

    Mit --LesezeichenPopupHight und --LesezeichenPopupMinHight zu 22px ergibt das:

    Man sieht aber, das auch der Text "unten" hängt, daher ist auch die ungleiche Aufteilung margin-top / -bottom notwendig.

    Kann so wie mit .bookmark-item:not(.subviewbutton) > .menu-iconic-left das Favicon auch der Text separat angesprochen werden?

    Übrigens: mit dem calc kann ich mit den Zeilenhöhen beliebig variieren, die Skalierung de Favicons paßt dann inetwa - ansonsten muß ich diese Werte ständig verändern.

    FF 115.x ESR auf Win10 Pro 64bit

    FF 115.x ESR auf Linux Mint