Bildergröße in Chrome

[lowsaxonian]

Hallo Community,

in den letzten Tagen habe ich mal dran begeben, meine HP neu zu gestalten. Hierbei ist mir aufgefallen, dass die Ausgabe der Bilder (Formatangabe in %) in IE 7+8 sowie FF 3xx ähnlich bis gleich ist, jedoch in Chrome haut´s mir das Format komplett daneben. Die Höhe schrumpft auf etwa 50%, die Breite bleibt etwa gleich. Angaben in festen Größen wie Pixel will ich nicht, da die Seite sonst auf größeren Monitoren mies aussieht.
Screenshots habe ich keine, einen Link ebensowenig, da die Site noch nicht online ist.

Daher an dieser Stelle nur die generelle Frage: hat jemand Erfahrungswerte zu der Problemstellung Bilder und Formatangabe in % und falls ja, wie kann ich diese umgehen oder beheben ?

Weihnachtliche Grüße
low

 

[Arcsinh]

Dann zeig' doch mal deinen Code.

 

[threadi]

Wieso verwendest Du überhaupt Prozent als Maßeinheit für Bilder? Dadurch müssten diese Bilder ja eine sehr große Auflösung haben damit sie auch auf größeren Viewports ordentlich dargestellt werden können. Daher müssten die Dateien selbst sehr sehr groß sein. Wenn dein Design das nicht unbedingt erfordert, würde ich es nicht machen. Ohne Quellcode kann man das aber nicht beurteilen.

 

[lowsaxonian]

Wieso verwendest Du überhaupt Prozent als Maßeinheit für Bilder?

Moin Threadi,
auf meiner "alten" Seite habe ich die Pics auch mit % angegeben. Grund dafür ist, dass die Bilder mit den Texten (Formatierung mit em) "mitwachsen" können. Ich hab´s jetzt mal spaßeshalber auf px umgestellt.

Hier ein Link zu meiner Testseite.
Die Seite habe ich mit einem min-width von 900px dargestellt, damit sie auf Handys und Handhelds noch lesbar ist. Ein Scrollen nehmen ich dafür in Kauf, eine Xtrasite für H&H´s werde ich vermutlich nicht basteln.
Die Seite ist noch nicht ausformatiert und auch noch nicht ausformuliert. Auch die Header-Grafik ist jetzt nur mal schnell hingebastelt, da die Hintergrundfarbe noch nicht feststeht.
Auf FF3, IE8 und Chrome8 siehts so aus, wie ich es mir (zu diesem) Zeitpunkt vorstelle, aber der IE7 im Büro scheint die 80% Breite für den Text neben den Bildern/Links nicht zu erkennen. Ich hab auf die Schnelle nichts ergooglen können. Kann es sein, dass der IE7 die Angabe width, zumindest in%, noch nicht umsetzt ?

Wenn Ihr noch weitere Vorschläge zur Seite habt, vll. auch, wie man die Seite insgesamt anders darstellen, bin ich für jeden Hinweis dankbar.
Grüße
low

 

[threadi]

Lass bei den width- und height-Attributen der Bilder die Einheit "px" weg. Die gehört dort nicht hin.

Bei mir entsteht zudem trotz einem deutlich größeren Viewport als 900px ein horizontaler Scrollbalken. Das hängt imho mit padding + width bei #wrapper zusammen. padding und width sollten nicht zusammen auf ein Element angewendet werden. Sowas verursacht Probleme in der Darstellung insbesondere beim IE. Korrigiere das mal.

Und: die Seite ist so einfach aufgebaut. Mir ist es ein Rätsel wieso man bei sowas überhaupt irgendein Style-Problem haben kann. Verzichte auf alle prozentualen Angaben, insbesondere die 99% sind meist sinnfrei untergebracht. Das geht auch viel einfacher.

 

[lowsaxonian]

Padding im Wrapper ist raus, px aus den Bildern ebenfalls; trotzdem will´s im IE7 nicht klappen.

Ich versuche, die Pics und die dazugehörigen Texte jeweils annährend mittig zu bekommen, wie soll das denn ohne prozentuale Angaben bei margin funzen ?


Mir gefällt die Seite so eigentlich nicht, aber die alte soll "anders" werden. Die vorliegende Variante ist mir eingefallen, grundsätzlich finde ich die nicht so strenge Variante ja auch schick. Aber wenigstens im 7er sollte es doch funzen, so alt ist der ja noch nicht, dass den jeder vom Rechner verbannt hat.
Wenn keinem eine Lösung einfällt, muss ich mir was anderes einfallen lassen.

 

[neuroleptika]

aber der IE7 im Büro scheint die 80% Breite für den Text neben den Bildern/Links nicht zu erkennen. Ich hab auf die Schnelle nichts ergooglen können. Kann es sein, dass der IE7 die Angabe width, zumindest in%, noch nicht umsetzt ?

Doch setzt er um.
Allerdings so als ob <p> ein eigenen bfc (suche "block formatting context" und "haslayout") bildet. <p> beginnt dadurch komplett neben dem float.
Die Zeile erstreckt sich also auf 80% von #wrapper + der Breite von img.

 

[lowsaxonian]

@ neuroleptika: Danke für den Tipp. Ich bin mal kurz über die Ergebnisse geflogen, scheint mir aber doch ein recht umfangreiches Thema zu sein. Ich werd mich mal einlesen und dann wieder berichten.