Photoalbum - Darstellung in Firefox und IE

[Laird-of-Camster]

Hallo Forum,

hoffentlich könnt Ihr mir bei meinem Problem helfen.

Ich möchte ein beliebiges Verzeichnis mit PHP einlesesn und die enthaltenen Fotos als Album ausgeben.

Der (statische) HTML-Code dazu sieht wie folgt aus:

<table cellspacing="0" cellpadding="0" style="width:100%" summary="">
...
   <tr>
      <td>
      ...
         <table cellpadding="0" cellspacing="0" width="100%" summary="">

<tr>
               <td valign="top">

<div style="float:left; width:250px; margin-bottom:30px; align:center; padding:20px; background:#e22b8a">
                     <a href="" target="_blank"><img src="./Bilder/foto1.jpg" height="150px" alt=""><br>Bild 01</a>
                  </div>

<div style="float:left; width:250px; margin-bottom:30px; padding:20px; align:right;">
                     <a href="" target="_blank"><img src="./Bilder/foto2.jpg" height="150px" alt=""><br>Bild 02</a>
                  </div>
                  ...
               </td>
            </tr>

</table>

</td>
   </tr>

</table>

Daraus macht Firefox folgendes: http://kikra.kilu.de/firefox.jpg

Und der Internet Exlplorer das: http://kikra.kilu.de/ie.jpg

Was auffällt ist, dass Firefox alles wunderschön zentriert. Aufgrund Bild 4, das breiter als die anderen ist, entsteht beim Internet Explorer eine Asymmentrie.

Wie kann ich das beheben?

Da ich in dem Verzeichnis die unterschiedlichsten Fotos haben werde (hochkant, quer, breit, schmal, ...) wäre es schön, wenn alle Photos im symmetrischen Abstand präsentiert werden - eben halt wie beim Firefox.

Nur ungern möchte ich mit Tabellen arbeiten. Der Befehl div bietet mir die Möglichkeit die Bilder flexibel - ohne vorherige Berechnungen, Prozentangaben und unabhängig von der Bildschirmauflösung - dazustellen.

Na? ... schon irgendwelche Ideen?

Danke schon einmal vorab für Eure Hilfe.

[Joachim]

Hi,

Der (statische) HTML-Code dazu sieht wie folgt aus:

<table cellspacing="0" cellpadding="0" style="width:100%" summary="">

Warum steckst Du Deine Bilder in einen Table, der für tabellarische Daten gedacht ist?

Deine Struktur sollte wie folgt aussehen, denn Du hast eine _Liste_ von Bildern:

<ul>
    <li><a href="..."><img src="..."></a></li>
    <li><a href="..."><img src="..."></a></li>
    <li><a href="..."><img src="..."></a></li>
</ul>

Mit getimagesize bekommst Du auch die Bildgrösse und kannst entsprechende margins setzen. Der Rest ist css.

Grüsse, Joachim