• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Unterschiede in der Interpratation von Chrome und Firefox

Christian_01

Mitglied
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
 

Anhänge

  • Chrome.PNG
    Chrome.PNG
    394,7 KB · Aufrufe: 5
  • Firefox.PNG
    Firefox.PNG
    422,1 KB · Aufrufe: 5
  • CSS-Code.PNG
    CSS-Code.PNG
    85,8 KB · Aufrufe: 6
  • HTML-Code.PNG
    HTML-Code.PNG
    107,7 KB · Aufrufe: 4
Werbung:
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
 
Und falls kein Link existiert, tut's auch https://jsfiddle.net :cool:

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.
 
Werbung:
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
 
Probier mal folgendes.
Code:
#Wegweiser1 img , #Wegweiser2 img {
 padding-top:100%;
}

Bei mir sieht's gut aus.
 
Zuletzt bearbeitet:
Werbung:
Zurück
Oben