[Gelöst] Bilder in einer Reihe passen sich in Firefox und IE nicht dem Seitenverhältnis an

[eltequilero]

Hallo Forumsmitglieder,

 

ich habe auf meiner Startseite 6 Bilder, von denen je 3 in einer Reihe stehen und sich dem Seitenverhältnis anpassen sollen. Das funktioniert auch einwandfrei mit Chrome und Android Browsern, aber nicht in Firefox und IE. Um die Bilder so hinzubekommen hab ich folgendes gemacht:

 

In HTML

 

<div class="tb">

<div class="tbr">

    <div class="tbc"><img></div>

    <div class="tbc"><img ></div>

    <div class="tbc"><img></div>

</div>

</div>

 

 

In der Editorial CSS:

 

.tb {

    display: table;

    max-width:100%;

    margin: 10px auto;

}

.tbr {

    display: table-row;

}

.tbc {

    display: table-cell;

    vertical-align: middle;

}

.tb img {

    max-width:100%;

}

 

 

Wie gesagt, in Firefox und IE sind die Bilder zwar richtig angeordnet und bleiben auch in einer Reihe, aber verändert man das Seitenverhältnis bleiben sie immer gleich groß. Das ist am PC oder am Laptop zwar kein Thema, aber vor allem über Tablet und Smartphones sieht das dann ziemlich bekloppt aus mit so großen Bildern...Woran könnte das liegen? 

 

Grüße,

tequilero

Edited January 26, 2014 by eltequilero (see edit history)

[Luca01]

Hallo eltequilero,

gib doch mal einen Link oder/und ein paar Eckdaten dazu.    Schon an welcher Stelle im Prestashop 3 Bilder nebeneinander angeordnet sind ist mir Rätselhaft.

Viele Grüße

[eltequilero]

Hi Luca,

habe mit dem Startseiteneditor die Startseite nach meinem Gusto gestaltet und eben zwei Reihen mit je 3 Bildern gesetzt, die dann auf bestimmte Seiten im Shop verlinkt sind. Das ist also kein Prestashop-Ding sondern wurde selbst so erstellt. Welche Eckdaten bräuchtest du denn sonst noch so?!

 

Hab eben ein wenig weiter recherchiert und bin auf diesen sehr simplen Lösungsweg gestoßen:

 

table {

                table layout:fixed;

}

 

Damit soll angeblich Firefox versorgt sein....Leider bin ich momentan nicht vor dem PC und kann es somit nicht ausprobieren. Werde ich aber später nachholen und das Ergebnis hier mitteilen...

 

Grüße

[Luca01]

Hallo eltequilero,

ein Link wäre für mich gut.

Viele Grüße

[eltequilero]

Jenachdem welchen Browser du benutzt, müsstest du einfach mal das Browserfenster verkleinern, dann siehst du was ich meine...

 

Danke und Grüße

Edited January 26, 2014 by eltequilero (see edit history)

[Luca01]

Hallo eltequilero,

ich vermute mal, dass funktioniert aus mehreren Gründen nicht. Zwei habe ich mal auf die Schnelle zusammengetragen. Der zentrale div-Container hat eine feste Breite. Die Bilder haben ebenfalls eine fixe Breite. Wobei bei den Bildern die Einheit fehlt. Ich vermute mal, da muß noch eine Menge Arbeit rein.  

Viele Grüße 

[eltequilero]

Meinst du also nicht, dass es mit einer geringen Anpassung in CSS möglich ist das zu verbessern? Immerhin passt ja alles beispielsweise in Chrome...d.h. doch eigentlich nur, dass FF und IE eben nicht die richtigen Zeilen lesen können...und da sollte eben Nachhilfe geschaffen werden.... 

 

Grüße

[Luca01]

Hallo eltequilero,

 

Meinst du also nicht, dass es mit einer geringen Anpassung in CSS möglich ist das zu verbessern?

Nein, das glaube ich nicht.

 

Immerhin passt ja alles beispielsweise in Chrome

Wenn Chrome drei Bilder mit einer fixen Breite innerhalb eines höheren Div-Container, der ebenfalls eine fixe Breite hat, scaliert, läuft bei Chrome etwas nicht richtig. Firefox und IE interpretieren das so, wie es geschrieben steht. Davon abgesehen haben die Bildgrößen keine Einheit, also px, em oder %.

Um ein Layout an die Bildschirmgröße anzupassen macht es Sinn die Größen der Inhalte z.B. konsequent in Prozent anzugeben. Dann kann man die Breite z.B. durch den Tag max-width( http://www.css4you.de/max-width.html  ) begrenzen.

 

Die rechte Spalte hat auch eine fixe Breite von 193px und schiebt sich im FF "hinter" die zentrale Spalte. Da muß man ziemlich grundsätzlich ran.

[eltequilero]

Hi Luca,

 

danke fürs Drüberschauen, auch beim anderen Topic! 

 

Nun, wieso Chrome (und übrigens auch alle Standard Android Browser und Safari) das problemlos lesen kann wird wohl ein Rätsel bleiben wenn sich offensichtlich so viele Fehler/Unstimmigkeiten eingeschlichen haben. Das mit der rechten Spalte ist ja eigentlich unproblematisch, vorausgesetzt die zentrale Spalte behält ihre Größe bei, denn dann sieht es ja entsprechend gut aus!

 

Nichtsdestotrotz wird auf langer Sicht wohl oder übel wie im anderen Topic geschrieben wohl ein neues Template her...um den Zeitraum zu überbrücken werd ich wohl noch ein wenig rumprobieren, dass das mit der Größenanpassung vielleicht doch noch irgendwie klappt....

 

Falls dir hierzu noch irgendwas einfällt, immer her damit 

 

Viele Grüße, vielen Dank

el tequilero

[eltequilero]

Habe doch noch eine ziemlich einfache Lösung gefunden ;-)

 

Im CSS von oben folgende Änderung

 

.tb {

 

display: table;

 

width:100%;

 

margin: 10px auto;

 

table-layout: fixed;

 

}

 

...und schon funktioniert es!

Edited January 26, 2014 by eltequilero (see edit history)