nicht angemeldet
Hallo,
dein quellcode sieht sicher so aus:
<p style="line......"> text text text <img src=".."> text text </p>
und wie du richtig erkannt hast unterbricht das image den vorhergehenden absatzt (<p>)
Das ist falsch. Inline-Elemente wie 'img' erzeugen eine so genannte "Inline-Box". Der obere Absatz enthält dessen drei, zum einen die anonyme Inline-Box " text text text ", dann die Inline-Box, die die Grafik erzeugt, und als drittes wieder eine Inline Box mit " text text ". Grafisch würde das etwa so aussehen:
+---------------------------------------------------+
| +-----------------------------------------------+ |
| | +----------------+ ############ +-----------+ | |
| | | text text text | ## Grafik ## | text text | | |
| | +----------------+ ############ +-----------+ | |
| +----------------------------------------------+| |
+---------------------------------------------------+
^---------------------------------------------------^ Von 'p' generierte Block-Box
^-----------------------------------------------^ Zeilen-Box
^----------------^ ^----------^ Anonyme Inline-Boxen
^-----------^ Von 'img' generierte Inline-Box
Naja, ich weiß nicht, ob man da jetzt etwas erkennen kann...
Der rechteckige Bereich, der eine Zeile Inline-Elemente enthält, nennt sich Zeilen-Box (line box). Diese Zeilen-Box reicht für gewöhnlich genau vom linken Rand des umgebenden Blocks zum rechten Rand. Jede Zeile eines Textabsatzes zum Beispiel erzeugt eine eigene Zeilen-Box. Mit der Eigenschaft 'line-height' wird die Höhe dieser Zeilenbox bestimmt, deine Fehleranalyse kann also nicht richtig sein, wie die korrekte Darstellung folgenden Dokumentes z.B. im aktuellen Opera und Mozilla ja auch zeigt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>'line-height' und Grafiken</title>
<style type="text/css">
div {
line-height: 300%;
border: 1px solid blue;
}
span {
border: 1px solid red;
}
img {
border: 1px solid green;
}
</style>
</head>
<body>
<div>
<span>Inline-Box mit Rahmen</span> <span>Inline-Box mit Rahmen</span>
<img src="grafik" width="13" height="10" alt="" />
<span>Inline-Box mit Rahmen</span> <span>Inline-Box mit Rahmen</span>
<span>Inline-Box mit Rahmen</span> <span>Inline-Box mit Rahmen</span>
<span>Inline-Box mit Rahmen</span> <span>Inline-Box mit Rahmen</span>
<span>Inline-Box mit Rahmen</span> <span>Inline-Box mit Rahmen</span>
</div>
</body>
</html>
Der IE beschneidet die Zeilenbox in der Höhe, man kann das anhand des Beispiels gut sehen im Vergleich zur Darstellung ohne Grafik. Das ist eindeutig ein Bug. Ich konnte jetzt auf die Schnelle nicht herausfinden, ob man ihn irgendwie umgehen kann. Vielleicht hat jemand anderes eine Idee? Ansonsten
steht der text in einer zelle so kannst das problem wie folgt lösen:
[snip]
Also bei mir bewirkt
<style type="text/css">
td {
line-height: 300%;
border: 1px solid blue;
}
span {
border: 1px solid red;
}
img {
border: 1px solid green;
}
</style>
...
<table>
<tr>
<td>
<span>Inline-Box mit Rahmen</span> <span>Inline-Box mit Rahmen</span>
<img src="grafik" width="13" height="10" alt="" />
<span>Inline-Box mit Rahmen</span> <span>Inline-Box mit Rahmen</span>
<span>Inline-Box mit Rahmen</span> <span>Inline-Box mit Rahmen</span>
<span>Inline-Box mit Rahmen</span> <span>Inline-Box mit Rahmen</span>
<span>Inline-Box mit Rahmen</span> <span>Inline-Box mit Rahmen</span>
</td>
</tr>
</table>
keine andere Darstellung. Habe ich deinen Ansatz falsch verstanden?
Gruß,
MI
: Michael Jendryschik : michael@jendryschik.de : http://jendryschik.de/ :
: Einführung in XHTML, CSS und Webdesign : http://jendryschik.de/wsdev/ :
: Die Domain http://best-of-netdigest.de steht bei sedo.de zum Verkauf. :
: http://www.sedo.de/search/showdetails.php3?keyword=best-of-netdigest.de :