nicht angemeldet
Zeilen-Abstand
Moin,
Auf dem folgenden Bild sieht man 2 Ausschnitte ein und derselben Seite in 2 Browsern. Links haben wir den Netscape6 und rechts MSIE6. Der Zeilenabstand ist 150% (mit <P style="line-height: 150%">), was bei Netscape auch korrekt angezeigt wird. MSIE kommt damit nicht ganz so perfekt klar wie man dem Bild entnehmen kann. Ich glaube, das liegt an den kleinen Grafiken, die im Text positioniert sind (die kleinen orangen Pfeile).
Kann mir jemand helfen? Ich möchte, dass auch der MSIE6 den richtigen Zeilenabstand anzeigt - so wie der Netscape6. Allerdings will ich auf meine Pfeile nicht verzichten.
Vielen Dank im Voraus
Alex
-
Moin,
hi
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>)steht der text in einer zelle so kannst das problem wie folgt lösen:
- die stylesheet angaben schreibst du einfach in den <td> - tag
bsp.:
<td style="line-height:19.5pt;font-size:12pt;">
test test test test <img src="xyz.gif"> test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</td>
sonst klammerst du den text in ein <div> und definierst die stylesheets in diesem tag
allgemein ... die angaben müssen in einem "übergeordneten" tag definiert werden
Vielen Dank im Voraus
Alexmfg nag
-
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-BoxNaja, 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 :-
Hi
ich habe mein posting mal in eine anschaulichere form gepackt
[http://www.stud.uni-giessen.de/~su6690/lineheight.html]
mfg NAG--
der mensch weiss immer mehr über immer weniger, bis er alles uber nichts weiss !-
Hallo,
ich habe mein posting mal in eine anschaulichere form gepackt
http://www.stud.uni-giessen.de/~su6690/lineheight.htmlOkay, das zeigt mir, dass ich dich richtig verstanden habe. Deine Beispielseite demonstriert, dass dein Lösungsansatz kein solcher ist. Schau dir die unterschiedlichen Zeilenabstände im IE6 zwischen Zeilen ohne Grafik und Zeilen mit Grafik an, dann siehst du, was ich meine.
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 :-
Hallo,
hallo nochmal,
Okay, das zeigt mir, dass ich dich richtig verstanden habe. Deine Beispielseite demonstriert, dass dein Lösungsansatz kein solcher ist.
das kann sein ...obwohl ich im ie6 folgendes sehe
<img src="http://www.stud.uni-giessen.de/~su6690/abstand.png" border="0" alt="">
und das sieht mir so aus...als sollte es funktionieren?
und das erste beispiel zeigt, das eine zu grosse grafik den abstand
sprengen kann ...Gruß,
gruss zurück :)
MI
mfg NAG
--
der mensch weiss immer mehr über immer weniger, bis er alles uber nichts weiss !-
Hallo,
und das erste beispiel zeigt, das eine zu grosse grafik den abstand
sprengen kann ...Natürlich. Bedenke, dass die Zeilenbox alle Inline-Boxen umschließt:
+---------------------------------------------------+
| +-----------------------------------------------+ |
| | ############ | |
| | ############ | |
| | +----------------+ ## Grafik ## +-----------+ | |
| | | text text text | ############ | text text | | |
| | +----------------+ ############ +-----------+ | |
| +----------------------------------------------+| |
+---------------------------------------------------+^---------------------------------------------------^ Von 'p' generierte Block-Box
^-----------------------------------------------^ Zeilen-Box
^----------------^ ^----------^ Anonyme Inline-Boxen
^-----------^ Von 'img' generierte Inline-BoxZu deinem Screenshot: Verkleinere dein Browserfenster bzw. die Tabellenbreite und vergleiche im "Beispiel mit kleinerem image - 200% zeilenabstand" den Abstand zwischen der zweiten und dritten mit dem Abstand zwischen der dritten und vierten Zeile, dann siehst du, dass es unterklärliche Divergenzen gibt.
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 :-
Hallo,
palimpalim
Zu deinem Screenshot: Verkleinere dein Browserfenster bzw. die Tabellenbreite und vergleiche im "Beispiel mit kleinerem image - 200% zeilenabstand" den Abstand zwischen der zweiten und dritten mit dem Abstand zwischen der dritten und vierten Zeile, dann siehst du, dass es unterklärliche Divergenzen gibt.
ich sehe ein, du hast recht ...:)
und ich hoffe alex (urheber des threads) hat die dikussion noch weiterverfolgt.Gruß,
mfg nag
--
der mensch weiss immer mehr über immer weniger, bis er alles über nichts weiss !-
Hallo,
ich sehe ein, du hast recht ...:)
Wenigstens einer, der das mal einsieht. ;-)
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 :
-
-
-
-
-
-
Hallo,
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.
Denke ich auch, siehe auch http://www.richinstyle.com/bugs/ie5.html#line-height (gilt offensichtlich auch für IE6).
Ich konnte jetzt auf die Schnelle nicht herausfinden, ob man ihn irgendwie umgehen kann.
Mir fällt nichts ein, beziehungsweise alle Versuche zeigen keine Wirkung.
Wenn auf die Grafiken als img-Elemente verzichtet wird, können sie dennoch weiterhin über das Pseudoelement :before und die Eigenschaft content:url(...) eingebunden werden, sodass sie zumindest in anderen Browser auftauchen:
http://edition-w3c.de/TR/1998/REC-CSS2-19980512/kap12.html#heading-12.1
http://edition-w3c.de/TR/1998/REC-CSS2-19980512/kap12.html#heading-12.2
http://selfhtml.teamone.de/css/eigenschaften/pseudoformate.htm#before_afterGrüße,
Mathias
-
- die stylesheet angaben schreibst du einfach in den <td> - tag