✔ Thumbs ohne Tabelle zentrieren

Hallo Maik,

ich hoffe, ich kann Dich über diesen Post nochmal erreichen ...

Du hast mir mit Deiner Lösung anhand Deines Codebeispiels sehr geholfen - in allen gängigen Browsern läuft die Anordnung und Zentrierung der Thumbs hervorragend ... nur leider überhaupt nicht zufriedenstellend im IE 6, 7 und 8, mit jeweils ganz unterschiedlichen Ergebnissen.

Nachdem ich mittlerweile schon Stunden damit zugebracht habe, das Dilemma zu lösen, wende ich mich nun doch nochmal an Dich, da ich nicht wirklich weiterkomme. Es wäre toll, wenn Du noch einmal einen Blick werfen könntest.

Aus den genannten Gründen habe ich allerdings die Änderungen noch nicht im Live-Shop vorgenommen, sondern bisher lediglich im Test-Shop, der vollkommen identisch aber mit Verzeichnisschutz versehen ist.

Dürfte ich Dir den Zugang senden?

Danke und Grüße
Lizzy
 
Lizzy hat gesagt.:
Du hast mir mit Deiner Lösung anhand Deines Codebeispiels sehr geholfen - in allen gängigen Browsern läuft die Anordnung und Zentrierung der Thumbs hervorragend ... nur leider überhaupt nicht zufriedenstellend im IE 6, 7 und 8, mit jeweils ganz unterschiedlichen Ergebnissen.
Zum Vergrößern anklicken....
Ich erziele mit meinem Code in Post #5 ebenso in der IE-Familie ein übereinstimmendes und zufriedenstellendes Ergebnis, analog, wie in den übrigen Browsern.

ie6.jpg ie7.jpg ie8.jpg
(v.l.n.r.: IE6, IE7, IE8)

Kann es sein, dass du diesen Teil vergessen hast?

HTML: 
<!--[if lt IE 8]>
<style type="text/css">
.imageholder{overflow:hidden}
.imageholder,.inner{display:block}
.inner {top:50%;left:0;}
.inner img{top:-50%; position:relative;display:block}
</style>
<![endif]-->


mfg Maik
 
Hallo Maik,

das ist ja merkwürdig und nee, vergessen habe ich das leider nicht ;-)

Zur Verdeutlichung habe ich auch mal ein paar Ansichten mitgesendet:

1. Firefox - so ist es prima:
firefox.jpg

2. IE 8 - hier zeigt er die ersten beiden Thumbs (bzw. nur den Rahmen) in erhöhter Breite an. Zudem habe ich hier die spezielle Anweisung: .inner {top:50%;} weglassen müssen, da er mir sonst die Bilder stark nach unten und ausserhalb des Rahmens setzt. (Ohne diesen Befehl scheint die vertikale Zentrierung aber zu funktionieren ...)
ie8.jpg

3. IE 7 - Hier haut die vertikale Zentrierung leider nicht hin, auch eine spezielle Anweisung nur für den IE 7, wie z.B.: .inner {top:50%;} bringt nicht wirklich was (Zwar wird (gleichmäßig) nach unten verschoben, aber eben nicht zentriert ...
(Desweiteren funktioniert die Zoom-Lupe hier nicht und das gewählte Info-Bild bei den Thumbs 3-9 wird unten abgeschnitten und zwar genau auf die relative Größe des ursprünglichen Bildes vom Thumb Nr.1, aber diese Sachen sind wohl eher was für den Modul-Entwickler ...)
ie7.jpg

4. IE 6 - Hier hat es das Layout leider komplett zerhauen ...
ie6.jpg

Tja, so sieht's aus, ich werde wohl noch ein wenig rumprobieren müssen - vielleicht hast Du ja noch ein paar Tipps für mich oder wärst gar bereit mal einen Blick zu werfen ... ich sende Dir gerne was zu!?

In jedem Fall: Vielen Dank für Deine Hilfe!

Liebe Grüße
Lizzy
 
Da wirst du mir dann mal den Link zu der Seite nennen müssen, damit ich mich dazu näher äußern kann.

mfg Maik
 
Vergessen hast du den CSS-Zusatz für den IE zwar nicht, blos auf die falsche Version angewendet.

Der CSS-Code in http://www.kinderfahrradshop.de/templates/xtc4/kifala_ie8.css ist nämlich nicht dem IE8, sondern dem IE6 und IE7 gewidmet, denn
Code: 
<!--[if lt IE 8]>
<style type="text/css">
.imageholder{overflow:hidden}
.imageholder,.inner{display:block}
.inner {top:50%;left:0;}
.inner img{top:-50%; position:relative;display:block}
</style>
<![endif]-->
heißt less-than (kleiner als) IE 8.

Lies dir hierzu mal das Kapitel Alternative CSS-Dateien für den Internet Explorer (Conditional Comments) durch.

Und für einen Gegenvergleich mit der IE-Familie darfst du auch ruhig nochmal einen Blick auf das Original-Beispiel http://www.pmob.co.uk/temp/vertical-align3.htm werfen, woher der Code stammt, und in ihnen tadellos läuft.

mfg Maik
 
Ich hab mittlerweile einen weiteren Schwachpunkt in deinem CSS ausfindig gemacht, warum der IE6 die Thumbnails in ihrer wahren Größe anzeigt und sie daher auch vorzeitig umbricht, weil ihnen der Platz in der umschliessenden Box .MagicToolboxSelectorsContainer ausgeht :)

CSS: 
.inner img { 
	max-width: 80px; /* interpretiert IE6 nicht */
	max-height: 70px; /* interpretiert IE6 nicht */
	display: inline;
	vertical-align: middle;
}

Warum nicht einfach width und height? Das kann sogar der (d)olle IE6 :)

Ansonsten sollte "ie7-js" (http://code.google.com/p/ie7-js/) Abhilfe bieten, damit er sich hier standardkonform verhält:


mfg Maik
 
Bevor du mich jetzt fragst, warum der IE6 den kompletten rechten Spaltenblock umbricht, rate ich dir, dein CSS auf den "The IE5/6 Doubled Float-Margin Bug" zu überprüfen, der zumindest schon mal in #product-image auftritt, und diesen Block um 9px nach rechts verschiebt, resultierend aus float:left und margin-left:9px.

mfg Maik
 
Hallo Maik,

vielen Dank für Deine Hinweise! Ein wenig peinlich ist mir das ja schon - ich sollte vielleicht mal ein wenig mehr Grundlagen pauken ...

Jetzt ist ja richtig Licht am Horizont zu sehen, max-width und max-height hab' ich entfernt und nur durch width: 80px ersetzt - klappt prima - lediglich ausgewiesene Hochformate machen jetzt noch Probleme:
http://www.kinderfahrradshop.de/fah...danhaenger/burley-dlite-suspension::1827.html

Den IE 5/6 Doubled Float-Margin Bug werde ich mir mal zu Gemüte führen ...

Danke für Deine tolle Hilfe!
Lizzy
 
Moin,

die Hochformatbilder müssen wohl noch in ihrer Höhe begrenzt bzw. herunterskaliert werden.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück