✔ Firefox stellt SVG Datei nicht dar

[Sprint]

Hallo zusammen,

ich habe hier ein sehr merkwürdiges Problem mit einer SVG Datei in Firefox. Und zwar geht es um das Logo im Kopf auf dieser Seite: dyncheck.de

Auf allen Browsern wird es korrekt dargestellt, außer im Firefox. Aber nur im Seitenkopf. Im Fuß ist es da, auch im FF. Es ist auch korrekt im Quelltext zu finden, wird laut Inspektor aber mit Größe 0 ausgezeichnet.

Hat jemand eine Erklärung dafür und vielleicht auch noch eine Lösung?

Danke schon mal im Voraus,
Sprint

 

[Sempervivum]

Ich habe eine ganze Weile darüber gerätselt und nicht wirklich eine Erklärung gefunden. Es ist hier ja so, dass sich die Höhe des Logos an die Höhe der anderen Elemente im Kopf anpassen soll und dann wiederum die Breite entspr. dem Seitenverhältnis. Da scheint FF ein Problem zu haben. Ich konnte es mit dem HTML-Inspektor so ändern, dass das Logo sichtbar wurde, aber dann kam es zu einer Überdeckung weil sich die Breite des Containers nicht anpasste.
Als Lösung fällt mir nur ein, entweder die Höhe oder die Breite des Logos auf einen festen Wert zu setzen - etwas, was man beim responsiven Layout eigentlich nicht gern tut.

 

[Sprint]

Eine CSS Breite in Pixeln läßt das Bild tatsächlich anzeigen und anschließend paßt es sich tatsächlich auch in der Größe an, wenn die Viewportbreite reduziert wird.

Was ich da bloß nicht verstehe ist, warum das Bild im Seitenfuß auch ohne fixe Breite angezeigt wird. Obendrein funktioniert es auch auf der originalen Seite, von der diese hier abgeleitet wurde, ohne den festen Wert.

 

[basti1012]

Interesant ist auch ( ohne die feste Größe )
Wenn man das a img aus den div raus nimmt das es auch geht
Von

<div  class="header__cell header__cell--logo">
          <a href="https://dyncheck.de/index.php" class="header__logo">
                <img src="./icon-problem_files/herpolsheimer-neutral-logo-anthrazit.svg" alt="HERPOLSHEIMER innovativ GmbH &amp; Co. KG Logo">
          </a>
</div>

Zu

<a href="https://dyncheck.de/index.php" class="header__logo">
    <img src="./icon-problem_files/herpolsheimer-neutral-logo-anthrazit.svg" alt="HERPOLSHEIMER innovativ GmbH &amp; Co. KG Logo">
</a>

Selbst wenn man die Klassen Löscht aus den div geht es nicht.
Wenn man die Elemente tauscht

<a href="https://dyncheck.de/index.php" class="header__logo">
        <div  class="header__cell header__cell--logo">
             <img src="./icon-problem_files/herpolsheimer-neutral-logo-anthrazit.svg" alt="HERPOLSHEIMER innovativ GmbH &amp; Co. KG Logo">
         </div>
</a>

Geht es auch.
Da muss nur deine Css kram geändert werden ( transition und co ).

Oder einfach die Klasse darein Kopieren

<a href="https://dyncheck.de/index.php" class="header__logo">
        <div  class="header__cell header__logo header__cell--logo">
             <img src="./icon-problem_files/herpolsheimer-neutral-logo-anthrazit.svg" alt="HERPOLSHEIMER innovativ GmbH &amp; Co. KG Logo">
        </div>
</a>

Vieleicht hilft das den wahren Grund von diesen Problem zu finden

 

[Sprint]

Ich habe jetzt auch die verschiedenen Ansätze von basti1012 ausprobiert. Einen Grund für das merkwürdige Verhalten habe ich da aber auch nicht gefunden. Noch merkwürdiger wird die Sache, wenn man sich die verschiedenen Seiten der Zentralseite des Unternehmens (herpolsheimer.ag) im FF anschaut. Da ist das Logo trotz fehlender Größenangabe da, auf der Startseite aber nur oberhalb einer bestimmten Breite, auf den Unterseiten aber immer.

Ich hatte anfangs auch mal den oberen (problematischen) Teil an die Stelle des Logos im Fuß kopiert und auch da wurde es selbstverständlich angezeigt. Die Kombination an sich kann es also auch nicht sein.

Was auch immer es im Endeffekt ist, das Problem ist für mich jetzt nicht groß genug, um mich damit jetzt noch übermäßig lang zu beschäftigen. Ich danke euch auf jeden Fall für eure Hilfe