IE Darstellungs probleme span

[Chris]

Hallo,
ich füge auf meiner Webseite Bilder ein, und unter jedem Bild steht ein Link zur Quelle. Den Code habe ich mir von heise kopiert. Im Firefox wird es richtig dargestellt. Das Wort Quelle steht direkt unter dem Bild. Im IE (Version6) ist ein großer Abstand zwischen dem Bild und dem Wort "Quelle".

Der Code sieht so aus:

<p>  
<span style="width: 200px;" class="bild_rechts">  
<img width="200" height="150" src="http://url.de/000370_v01_am_arbeitsplatz.jpg" alt="Mann am Arbeitsplatz" title="am Arbeitsplatz" />  
<br />  
<span class="source"><a title="Quellen-Portal" target="_blank" href="http://url.de/000370-v01-am-arbeitsplatz-jpg">Quelle</a></span></span>  
</p>

Vielen dank

[Der Martin]

Hi,

Der Code sieht so aus:

genauer: Der HTML-Code. Die darin vergebenen Klassennamen lassen vermuten, dass auf diese Klassen noch weitere CSS-Regeln aufsetzen. Ohne die zu kennen, ist alles weitere nur Raterei.

<p>
<span style="width: 200px;" class="bild_rechts">
<img width="200" height="150" src="http://url.de/000370_v01_am_arbeitsplatz.jpg" alt="Mann am Arbeitsplatz" title="am Arbeitsplatz" />
<br />

Ist das Bild exakt 200px breit? - Ach ja, steht ja sogar als Attribut dran.
Dann rate ich mal: Firefox ignoriert width:200px für das span, da width bei inline-Elementen nicht wirken darf. Er stellt also den Whitespace (Zeilenumbruch im Quellcode) noch als Leerzeichen *neben* dem Bild dar, das span wird dadurch halt um ein paar Pixel breiter als das Bild.
IE dagegen wendet die width:200px verbotenerweise auf das span-Element an, also passt das Leerzeichen nicht mehr in dieselbe Zeile mit dem Bild, und es entsteht eine zusätzliche Leerzeile *vor* dem br-Element.

Fragt sich überhaupt, warum du so viele scheinbar unnütze Elemente hast. Für mich wäre das:

<div>
   <img />
   <p>Bildunterschrift</p>
  </div>

Wenn dieses Konstrukt mehrmals auftaucht, wäre es eventuell sinnvoll, das in eine Liste zu packen; an die Stelle des div-Containers würde dann das li-Element treten.

So long,
 Martin

[Gunnar Bittersmann]

@@Der Martin:

nuqneH

Fragt sich überhaupt, warum du so viele scheinbar unnütze Elemente hast. Für mich wäre das:

<div>
   <img />
   <p>Bildunterschrift</p>
  </div>

Für mich wäre das in diesem Fall:

<div>  
  <img/>  
  <cite><a>Quellenangabe</a></cite>  
</div>

Ein 'p' um 'cite' [HTML401 §9.2.1, http://de.selfhtml.org/html/text/logisch.htm@title=SELFHTML] herum ist Ermessenssache.

In HTML5 wird es spezielle Elemente zur Auszeichnung geben [HTML5 §4.8.1]:

<figure>  
  <img/>  
  <legend><cite><a>Quellenangabe</a></cite></legend>  
</figure>

Qapla'