Geschrieben von Christian Schnettelker

Schlagwörter:

Blamiere Dich täglich!

Zufälligerweise bot sich mir heute die Gelegenheit, meine Webseiten auf einem Mac mit Safari 5.1.9 zu testen. Dabei musste ich leider feststellen, dass ich seit längerem einen dicken Fehler in meinen responsiven Webseiten hatte, denn, als ich auf dem Obstrechner so durch meine Webseite scrollte, wurde ich blass: sämtliche Bilder waren in der Höhe total verzerrt. Wieso das?

Ich muss vorab sagen, dass ich meine Seiten eigentlich recht gewissenhaft teste: Chrome, Firefox, Internet Explorer und Opera. Da Apple den Safari-Browser für den PC nicht mehr anbietet hatte ich diese Tests allerdings schon länger nicht mehr gemacht, was sich natürlich prompt rächte…

Murphy’s Law: Alles, was schiefgehen kann, wird auch schiefgehen

Nun zur Ursache des Fehlers, nach ein paar Minuten in Google hatte ich diese herausgefunden. In meiner CSS-Datei legte ich bisher für die Bilder folgendes fest:

img { width:50%; height:50%; }

In diesem Beispiel würde das Bild in der halben Breite und Höhe dargestellt – zu kurz gedacht! Chrome, Firefox, Opera und selbst der sonst so garstige Internet-Explorer berücksichtigen in der Tat das Bild-Seitenverhältnis und berechnen die neue Bildhöhe selbstständig.

Apples Safari ist hier korrekter und setzt die Bildhöhe unter Umgehung des Seitenverhältnisses auf 50% der umgebenden Box – ein Umstand, der mir bisher entgangen ist und zu dem peinlichen Fehler führte. Um den nun endlich erkannten Fauxpas zu umgehen änderte ich alle Angaben bezüglich der Bilder wiefolgt:

img { width:50%; height:auto; }

Der Browser rechnet sich damit die zur gewünschten Breite passende Höhe selber aus, das funktioniert nach einem Test in allen meinen Browsern. Ein kleiner Hinweis noch: mangels neuerem 6er oder 7er Safari-Browser kann ich nicht sagen, in wieweit diese neueren Version das oben beschriebe „über-korrekte“ Verhalten immer noch zeigen.

Spinner

Eine Reihe von Leuten, die meine Seiten mit einem Mac besuchten, werden sicher gedacht haben: „was für ein Spinner, das soll professionelles Webdesign sein?“. Nun, damit muss ich wohl leben, mea culpa, zumindest tappten andere in die gleiche Falle. Im Gegensatz zum Papst habe ich allerdings auch nie behauptet, unfehlbar zu sein.

Und es gilt das alte Motto meines Ex-Chefs: „Blamiere Dich täglich!“.

Kommentare

Kommentare

Kommentar schreiben

Aufgrund neuer rechtlicher Bestimmungen habe ich die Kommentarfunktion meines Blogs vorübergehend deaktiviert und muss Sie vorerst bitten, Kommentare per Email an mail [at] manoftaste.de zu senden.