Hallo liebe Leute,
Nachdem ihr mir gestern bereits so bravourös aus der Patsche geholfen habt, hier ein weiteres Problem über dem ich schon einige Tage lang brüte...
Eine Unterseite meiner Website enthält Fotos mit dabeigefügten Text. Die Fotos habe ich so angeordnet, dass immer zwei in einer Reihe stehen, und den Abstand zwischen den (dann also) zwei Spalten auch wunderbar per CSS festgelegt. Um den Abstand zwischen den Reihen zu erhöhen, habe ich den CSS Befehl line-height angewandt. Was bei Firefox & Opera auch gut funktioniert, klappt bei IE 7 nicht: der setzt zwar auch den Abstand, verkleinert ihn aber sukzessive von Reihe zu Reihe. Habe schon verschiedene metrische Angaben für "line-height" (cm, pt, px, em) ausprobiert, alles hat nicht gefruchtet. Ich will aber auch nicht jedes einzelne Foto einzeln per "position:absolute" bestimmen, da das super viel Aufwand wäre. Schließlich versuche ich auch die vielen sicher schon auf der Zunge liegende Tabellenlösung zu vermeiden, wenn's denn irgendwie geht.
Wäre super nett, wenn jemand einen Rat hätte!
Viele Grüße,
Sebastian
Hier noch der HTML-Code der Seite im Auszug, dazu der entsprechende Abschnitt in meiner externen CSS-Datei. Da die Seite (noch) nicht online ist, kann ich da leider nicht einfach auf einen Link verweisen, sorry.
a) HTML-Code:
<p class="galerieziffern">
<a class="bildli-einzahl" href="http://www.uni-muenster.de/Debattierclub/images/gute_stimmung_g1.jpg">1 <img class="foto" src="Grafiken/gute_stimmung_g1_thumbnail.png" height="150" width="200" alt=""/></a>
<a class="bildre-einzahl" href="http://www.uni-muenster.de/Debattierclub/images/publikum_hinten_g1.jpg">2 <img class="foto" src="Grafiken/publikum_hinten_g1_thumbnail.png" height="150" width="200" alt=""/></a><br />
<a class="bildli-einzahl" href="http://www.uni-muenster.de/Debattierclub/images/uebergebe_g1.jpg">3 <img class="foto" src="Grafiken/uebergebe_g1_thumbnail.png" height="150" width="200" alt=""/></a>
<a class="bildre-einzahl" href="http://www.uni-muenster.de/Debattierclub/images/volle_reihen_g1.JPG">4 <img class="foto" src="Grafiken/volle_reihen_g1_thumbnail.png" height="150" width="200" alt=""/></a><br />
<a class="bildli-einzahl" href="http://www.uni-muenster.de/Debattierclub/images/warten_hoeren_g1.jpg">5 <img class="foto" src="Grafiken/warten_hoeren_g1_thumbnail.png" height="266" width="200" alt=""/></a>
<a class="bildre-einzahl" href="http://www.uni-muenster.de/Debattierclub/images/koennen_augen_luegen_g1.jpg">6 <img class="foto" src="Grafiken/koennen_augen_luegen_g1_thumbnail.png" border="2" height="266" width="200" alt=""/></a><br />
<a class="bildli-einzahl" href="http://www.uni-muenster.de/Debattierclub/images/prof_redet_g1.jpg">7 <img class="foto" src="Grafiken/prof_redet_g1_thumbnail.png" height="266" width="200" alt=""/></a>
<a class="bildre-einzahl" href="http://www.uni-muenster.de/Debattierclub/images/schmunzeln_g1.jpg">8 <img class="foto" src="Grafiken/schmunzeln_g1_thumbnail.png" height="266" width="200" alt=""/></a><br />
<a class="bildli-einzahl" href="http://www.uni-muenster.de/Debattierclub/images/fotogen_und_erleichtert_g1.jpg">9 <img class="foto" src="Grafiken/fotogen_und_erleichtert_g1_thumbnail.png" border="2" height="266" width="200" alt=""/></a>
<a class="bildre-zweizahl-miteinzahlli" href="http://www.uni-muenster.de/Debattierclub/images/erwiederung_g1.jpg">10 <img class="foto" src="Grafiken/erwiederung_g1_thumbnail.png" height="266" width="200" alt=""/></a><br />
<a class="bildli-zweizahl" href="http://www.uni-muenster.de/Debattierclub/images/regie_g1.JPG">11 <img class="foto" src="Grafiken/regie_g1_thumbnail.png" height="150" width="200" alt=""/></a>
<a class="bildre-zweizahl" href="http://www.uni-muenster.de/Debattierclub/images/gedanken_in_Schrift_g1.JPG">12 <img class="foto" src="Grafiken/gedanken_in_Schrift_g1_thumbnail.png" height="150" width="200" alt=""/></a>
</p>
b) CSS-Bereich:
@charset "ISO-8859-1";
/* F�r alle Abschnitte gilt: */
* { background-color:transparent; }
* { font-family:"Trebuchet MS"; color:#200E7E; font-size:10pt; text-align:justify; }
img#oben { position:fixed; background-color:transparent; top:0px; left:0; }
div.normal-b { overflow:hidden; position:absolute; top:0px; left:0px; padding-top:15px; background-color:#CDCBDA; border-style:solid; border-width:4px; border-color:#200E7E; padding-left:25px; border-bottom:none; border-top:none; padding-right:25px; min-width:545px; max-width:545px; }
img#unten { position:fixed; background-color:transparent; top:375px; left:0; }
h1 { font-size:14pt; }
h2 { font-size:11pt; }
h3 { font-size: 10pt; font-weight:bold; }
p.Bildunterschrift { font-size:9pt; }
span.bold { font-weight:bold; }
span.italics { font-style:italic; }
img.foto { border-style:solid; border-width:1px; border-color:#200E7E; }
(...)
/*5. Abschnitt: Galerie */
p.galerieziffern > * { font-weight:bold; font-size:15pt; text-decoration:none; line-height:90pt; }
a.bildli-einzahl { position:relative; left:28px; }
a.bildre-einzahl { position:relative; left:50px; }
a.bildli-zweizahl { position:relative; left:16px; }
a.bildre-zweizahl-miteinzahlli { position:relative; left:38px; }
a.bildre-zweizahl { position:relative; left:26px; }