Shoplogo links oben in Safari & IE sichtbar, in Firefox & Chrome unsichtbar

Shopware 5 Themes & Design
1

Hallo,

ich wurde gerade darauf aufmerksam gemacht und konnte bestätigen, dass unser Logo links oben in Firefox und Chrome verschwunden ist.

Nun dachte ich natürlich ich bin schlau und schaue mit dem Firebug, was da los ist. Da sehe ich aber am Ende nur genau den gleichen Code wie im Safari.

Kann es daran liegen, dass das Logo als .svg Grafik hinterlegt ist? Kommen Firefox und Chrome damit evt. nicht klar? Ich bin allerdings der Meinung, dass beim Test nach dem Umbau auf das .svg Logo in allen Browsern alles ok war…

Hat jemand sonst eine Idee?

 

 

2

Hallo.

Selbstverständlich zeigt GoogleChrome SVG-Grafiken an.

Wenn man nach fehlerhaften Darstellungen fragt, sollte immer ein Link angegeben werden. 

Falls es dieser Shop ist: https://www.roka-store.de/

Für die Klasse logo–link muss entweder ein width-Wert angegeben werden (A) oder display: block (B).

Ungetestet in Safari und Mobile Browsern. Bei Firefox würde auch noch display: inline gehen. 

 

A)

.header-main .logo-main .logo--link {
    height: 35px;
    height: 2.1875rem;
    display: inline-block;
    max-width: 100%;
    width: 100%;
}

B. )

.header-main .logo-main .logo--link {
    height: 35px;
    height: 2.1875rem;
    display: block;
    max-width: 100%;
}

Dann wird dort noch eine Javascript falsch eingebunden, die Position wird in der Developer-Konsole von z. B. GoogleChrome angezeigt.

 

Viele Grüße

 

1 „Gefällt mir“
3

Du musst dem Bild noch einmal explizit eine feste Höhe zuweisen. Also bspw.

.logo--link {
   img {
     .unitize-height(50);
   }
}

Was aber komisch ist, denn normal benötigst du es nicht. Und wie @hth bereits sagte ist dein JS im Footer falsch eingebunden.

1 „Gefällt mir“
4

Okay… danke erstmal für Eure Hilfe!

Ich habe jetzt in den Chrome Entwickler Tools nachvollzogen, dass die Funktion „logo-- link“ eine Höhe von 35px und eine Breite von 0px hat. 

Wie kann das denn auftreten? Ich habe meiner Meinung nach das Template in dem Bereich gar nicht angefasst, sondern nur die SVG Dateien über das Backend als Logos hochgeladen…

Wo definiere ich denn die Breite? Muss ich jetzt meine eigene header.tpl in diesem Punkt erweitern? Leider bin ich da nicht so fit. Und ist das ganze nicht über das Responsive Design so ausgelegt, dass die Höhe und Breite immer „automatisch“ festgelegt wird? Kann ich dann überhaupt eine feste Breite definieren?

Wäre super, wenn ihr mir hier noch nen Tipp geben könntet!

5

Hallo,

es sind immer Höhen und Breitenwerte eines HTML-Elements vorhanden, hier eben 0px. Welche Werte vom Browser ermittelt werden hängt von den HTML-Elementen und deren Eigenschaften und  unter Umständen auch von Besonderheiten einzelner Browser ab. Man kann die Berechnung von Höhe und Breite durch CSS-Eigentschaften beeinflussen - height- und width-Angaben. Dies können „absolut“ in Pixel oder relativ zur Höhe/Breite eines anderen HTML-Tags angegeben werden, dann steht dort % als Einheit. Damit „überschreibt“ man im Prinzip den vom Browser ermittelten Wert.

Hier ist die Definition display: inline-block für die Klasse logo–link das Problem. Wenn man dort ein block verwendet, funktioniert die Höhen und Breitenberechnung des img-Tags wie erhofft/erwartet. Der Ratschlag von @kaavy baut nicht auf der Vererbung von Höhe/Breite auf, sondern erzwingt diese direkt im img-Tag. Im Endeffekt bewirken beide Vorschläge, dass eine Höhe für den img-Tag definiert wird. 

Die header.tpl wird nicht erweitert. In einem eigenen abgeleiteten Template kann man entweder eine header.less Datei erstellen oder man bindet nur eine weitere CSS-Datei im Template ein und schreibt dort den Code rein, den ich gepostet habe. Wenn noch mehr Änderungen gemacht werden sollen, ist der Weg über Less-Dateien sinnvoll, weil es übersichtlicher ist. 

 

1 „Gefällt mir“
6

Also ich bekomme es nicht gebacken… ich habe eine eigene header.less erstellt mit dem Code von Dir, hth, und im eigenen Template abgelegt, aber das hat keinen Effekt.

Mein Code in der Frontend/Responsive/…/header.less, also in der Standard Datei, ist:

.header-main {
    .unitize(padding-bottom, 10);
    background: #fff;
    border-bottom: 1px solid @brand-primary;

    // Hide the currency and language switcher
    .top-bar { display: none }

	// Logo
	.logo-main {
		.unitize-padding(10, 10);

		.logo--link {
			.unitize-height(35, 16);
			display: inline-block;
            max-width: 100%;
		}

		// Smaller logo for mobile viewports
		.logo--shop {
			.unitize-height(35, 16);
			width: 50%;
		}

		.logo--supportinfo { display: none; }
	}

Das sieht für mich nach Euren Beschreibungen nicht so falsch aus?

Freue mich, falls ihr noch weitere Hinweise habt.

7

Ok, die “all.less” anpassen hilft, mit dem Code von hth ist das Logo in Firefox und Chrome wieder da! :slight_smile: