Unterschiede in der Interpratation von Chrome und Firefox

[Christian_01]

Guten Abend,

ich bin neu im Bereich des Webdesigns und habe direkt eine Frage, da mir etwas bei Programmieren aufgefallen ist. Wahrscheinlich habe ich irgendein Fehler gemacht, deshalb brauche ich eure Hilfe.

Warum werden die Pfeile bei gleichem Code in unterschiedlicher Höhe angezeigt?
Warum greift bei Firefox kein Padding oder Margin für die Pfeile?

Gruß

Christian

 

[MrMurphy]

Hallo

Hast du auch einen Link zu der Seite?

Wir kennen deine Grafiken nicht und du kannst wohl kaum erwarten, dass jeder, der dir Helfen möchte, für sich deinen Quelltext aus Grafiken abtippt.

Sowas vermindert die Hilfsbereitschaft im allgemeinen ziemlich radikal.

Grade bei Grafiken benötigt Flexbox manchmal noch Nachhilfe. Wobei die Präfixe bei Flexbox schon lange nicht mehr notwendig sind, die kannst du also entfernen.

Gruss

MrMurphy

 

[SpiceLab]

Und falls kein Link existiert, tut's auch https://jsfiddle.net

Mich würden zudem interessieren, was sich zu Beginn des CSS-Codes in den Zeilen #1-149 (und evtl. nach Zeile #202) so abspielt.

Oft wird die Ursache nämlich an falscher Stelle erwartet/vermutet.

 

[Christian_01]

Hallo MrMurphy,

hier einmal der Link zur Internetseite http://stromundgasvergleich24.de/, anbei habe ich aber auch nochmal die Daten hochgeladen, gepackt in einer ZIP-Datei.

Gruß Christian

 

[MrMurphy]

Hallo

Dein Problem kann ich nachvollziehen. Woher die unterschiedliche Darstellung der Browser kommt konnte ich aber nicht ergründen. Den Auslöser, padding-top in Prozent, hast du ja bereits erkannt.

Prozentangaben im CSS sind grundsätzlich diffizil, da sie sich auf unterschiedliche Grundlagen beziehen können. Speziell mit padding-top und padding-bottom gibt es immer wieder Probleme. Siehe auch

https://developer.mozilla.org/de/docs/Web/CSS/padding-top

und

http://www.thestyleworks.de/basics/percentage.shtml

Ich würde mal versuchshalber das padding-top zu entfernen und statt dessen den beiden Grafiken direkt ein margin-top zuweisen.

Wenn Bilder wie über Schritt 1, 2 und 3 in einem Zusammenhang stehen bringe ich die auch in einem Grafikprogramm auf eine einheitliche Größe. Die Skalierung durch die Browser ist für eine Anpassung an die Fensterbreite gedacht, nicht aber um unterschiedlich große Bilder im Browserfenster in einheitlicher Größe anzuzeigen.

Gruss

MrMurphy

 

[djheke]

Probier mal folgendes.

#Wegweiser1 img , #Wegweiser2 img {
 padding-top:100%;
}

Bei mir sieht's gut aus.