mal wieder ne frage an unsere css-spezis:
ich habe eine bildergalerie semantisch korrekt mit folgendem code:



Im normalfall wird das im browser so dargestellt (blau bild, rot beschreibung):


die bilder und ihre beschreibungen können nicht weiter verschachtelt werden, da das ganze sonst nicht valide ist. also können sie auch nicht direkt nebeneinander floaten. also hab ich erstmal jedem dt und dd width: 33%; und float: left; gegeben. ergebnis sieht folgendermaßen aus:


nun hab ich dd noch margin-left: -33%; margin-top: 10em; gegeben und schon sitzt die beschreibung unter dem dazugehörigen bild:


soweit sogut. jetzt kommt meine frage. denn was passiert, wenn nicht 3 sondern 4 oder mehr bilder da sind? dann siehts im safari 3.2, opera 9.2 und IE7 so aus:

man beachte: die erste beschreibung ist eine zeile länger als die zweite und dritte. darum ist das vierte bild unter dem zweiten. ist nicht so schön, aber das viel größere problem ist im firefox 3 zu sehen:

da werden die floatenden beschreibungen von den bildern der nächsten zeile überlagert. was kann ich denn dagegen tun?

ich hätte ncoh dazuschreiben müssen, dass diese bildergalerie von der typo3 extension tt_news erzeugt wird, und ich darum nicht ohne unsauberen code zu bauen irgendwas zwischen die einzelnen bilder packen kann. sonst hätt ich das nämlich längst so gemacht wie du sagst, perseus

/edit: mmarx, krümelkacker! natürlich is da auch n alt tag drin, aber darum gehts hier nicht.

die frage ansich ist ja nur, wie ich dem firefox erklären kann dass er nicht über die texte drüber soll. ich überlege schon da irgendwas mit absoluter positionierung zu machen, aber mir fällt nichts vernünftiges ein.