Hallo liebes Forum,
ich habe ein kleines Problem hinsichtlich einer sauberen , browserübergreifenden Anordnung von Thumbnails auf einer Produktinfo-Seite in unserem Shop - tabellenfrei, versteht sich. Über Eure Hinweise und Hilfe würde ich mich sehr freuen.
Es geht darum, im Format unterschiedliche Thumbs (Höhe, Breite) gleichmäßig in einem Container anzuordnen - jeweils 3 in einer Reihe mit einem immer gleichgroßen Rahmen zur besseren Übersicht.
Wenn ihr Euch den folgenden Link im Firefox anschaut, bekommt ihr einen Eindruck, wie das ganze optimalerweise ausschauen soll:
Puky Crusader 20 Zoll | 3-Gang-Schaltung
Folgendes CSS steht dahinter:
Code:
div.MagicToolboxSelectorsContainer {
overflow:hidden;
width:325px;
margin-top:6px;
}
.MagicToolboxSelectorsContainer {
white-space:normal;
}
.imageholder {
position:relative;
display:table;
height: 80px;
width: 102px;
vertical-align: middle;
text-align: center;
border: 1px solid #cdcdcd;
float:left;
margin:0 4px 4px 0;
}
.inner {
width:100%;
display:table-cell;
vertical-align:middle;
position:relative;
text-align:center;
}
.inner img {
max-width: 80px;
max-height: 75px;
display: inline;
vertical-align: middle;
}
.inner a img {
border: none;
}
Nun wäre es natürlich vermessen, anzunehmen, dass das Ganze auch durchgängig in den IEs klappen würde- und tatsächlich, die drei noch relevanten Versionen von IE6 - IE8 interpretieren doch teilweise sehr unterschiedlich - was mich zu folgenden Zusatzanweisungen veranlasste, die auch online sind:
IE6:
Code:
.imageholder {
overflow:hidden;
}
.imageholder,.inner {
display:block;
}
.inner {
top:50%;
left:0;
}
.inner img {
top:-50%;
position:relative;
display:block;
width: 80px;
}
IE7:
Code:
.imageholder {
overflow:hidden;
}
.imageholder,.inner {
display:block;
}
.inner {
top:50%;
left:0;
}
.inner img {
top:-50%;
position:relative;
display:block;
max-height: 75px;
}
und IE8:
Code:
.inner img {
max-width:80px;
max-height: 75px;
}
Die Ergebnisse sind akzeptabel, aber noch nicht wirklich befriedigend:
1. Öffnet ihr den obigen Link mit dem IE 8, so werden - für mich nicht verständlich - einige Thumbs bzw. deren Rahmen breiter dargestellt als die angewiesenen 102 px, was dazu führt, dass manchmal nur 2 Thumbs in einer Reihe auftauchen ...
2. Beim IE 7 scheint alles o.k. zu sein.
3. Beim IE 6 werden die Thumbs stets mit width: 80 px angezeigt und bei Hochformatbildern entsprechend in die Höhe gesetzt. Das seht ihr hier:
S'cool Einrad JUS - Alu
Begrenze ich mit height: 75px werden die Bilder entsprechend gestaucht ...! Ausserdem ist hier die vergrößerte Bildansicht (oberhalb der Thumbs) gemäß des Formats des ersten Thumbnails "beschnitten", so dass nur Teile eines Bildes betrachtet werden können - aber das ist eine andere Schraube, an der gedreht werden muss ...!
Fällt Euch dazu was ein? Wie gesagt, ich bin für jeden Hinweis dankbar (denn, ich bin nicht wirklich ein CSS-Profi ...)
Liebe Grüße
Lizzy