CSS: Benannte Zeichen beeinflussen Float-Box

Galanos

Galanos

Aktives Mitglied
Thread Starter
Dabei seit
19.12.2005
Beiträge
625
Reaktionspunkte
23
Hallo :)

Ich sitze ziemlich verwirrt vor einem Problem mit CSS.

Schaut euch mal bitte diese Beispielseite an:
http://www.galanos.de/initialen.htm

Die beiden Absaetze sind identisch, bis auf den maskierten Gedankenstrich (ndash) im zweiten Absatz.
Warum verkleinern Firefox und IE/Win die Box der gefloateten Initiale, in deren nachfolgendem Absatz ein "benanntes Zeichen" vorkommt, auf (offensichtlich) Zeichengroesse, jedoch in Absaetzen, die frei von solchen Zeichen sind, nicht?

Danke fuer eine Idee, Galanos

Achso, der Code, vielleicht erkennen ja geuebte Augen schon hier einen Fehler:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Test</title>
<style type="text/css"> 
<!--
body {
	margin:20px;
	color:#000000;
	font-size:medium;
}
.initialtext {
	font:1em Georgia;
	width:50%;
	border:1px solid #000000;
}
.initialtext:first-letter {
	float:left;
	padding:0;
	margin-right:5px;
	font:2em Georgia;
	font-weight:bold;
	border:1px solid #FF0000;
}
--> 
</style>
</head>
<body>
	<p class="initialtext">
		Tuero ex esectet, si blaortin vel ut vent autpatet diamcorper in henit numsan ex etuer secte magna aliquat adionsed tatisim ing ercidui blam et prat. Ex eraestie min henit duismolor sum volendi onulputat, velit prat, con eu faccum deliscing ea cor sit lore dolore conse duipit, quis aut ip eum velendio consenim zzriusto enim num nosto et, si..
	</p>
	<p class="initialtext">
		Tuero &ndash; ex esectet, si blaortin vel ut vent autpatet diamcorper in henit numsan ex etuer secte magna aliquat adionsed tatisim ing ercidui blam et prat. Ex eraestie min henit duismolor sum volendi onulputat, velit prat, con eu faccum deliscing ea cor sit lore dolore conse duipit, quis aut ip eum velendio consenim zzriusto enim num nosto et, si.
	</p>
</body>
</html>
 
Interessantes Problem! Es hat sicher was mit der Höhe des Zeichens (hier der Dash) und dem Rendering in den Blöcken und Inline-Elementen zu tun (in Abhängigkeit vom Pseudolementes ::firstletter). Ich habe ein bisschen rumprobiert, mit verschiedenen CSS-Mitteln war das Problem im Firefox nicht zu beheben (width, height usw.).

Allerdings klappt es damit im FF am Mac:

HTML:
<span>&ndash;</span>

Ich vermute mal, dass dadurch eine Inline-Box in der Zeile im Absatz erzeugt wird, die sich an der Höhe der Schriftgrösse orientiert, egal wie hoch der Dash in Wirklichkeit ist.

2nd
 
Wenn man &ndash; in <b></b>, <i></i>, <em></em> oder dergleichen verpackt, geht es.
 
Zuletzt bearbeitet:
Ist ja im Prinzip dasselbe wie mein Span: Es wird eine Inline-Box im Block-Element p erzeugt. Allerdings halte ich Span für die elegantere Methode, da es primär wie ein DIV im Layout semantisch "neutral" ist - die anderen Inliner sind das ja nicht.

2nd
 
Hm... kann es sein, dass &ndash; keine Entität nach ISO-8859-1 ist?

Warum das Verhalten im Rendering so ist (und nicht, wenn man es in HTML-spans setzt) ist mir zwar nicht so klar... aber das wäre die "Ungewöhnlichheit", die mir so eben ins Auge fiele, und das vielleicht irgendwie indirekt erklären erkönnte...
 
Ein anderer Charset bringt nichts, ich habe es mit UTF-8 und dem direkt eingetippten Dash (neben einem Test mit der/dem (???) Entity) vorhin ausprobiert ;)

2nd
 
Also im IE7 sind beide Absätze identisch dargestellt.

Ich kann die unterschiedliche Darstellung eigentlich nur mit Firefox/Camino (Gecko) nachvollziehen.

Möglicherweise hängt es hiermit zusammen:

https://bugzilla.mozilla.org/show_bug.cgi?id=366359
 
Ohne float verschwinden im Firefox aber die Unterschiede auch nicht.
 
Habe ich auch alles probiert: Floats an/aus und verschiedene Line-Heights. Das liegt irgendwie an dem Dash und einem Bug in der Mozilla Engine. Mit einem Ampersand z. B. funktioniert es.

2nd
 
Ohne float verschwinden im Firefox aber die Unterschiede auch nicht.
Macht das einen Unterschied für die rendering engine?

"The :first-letter pseudo-element may be used for "initial caps" and "drop caps", which are common typographical effects. This type of initial letter is similar (...) to a floated element." (CSS2 specification)
 
Wenn man explizit float:none angibt wird es als inline-Level-Element behandelt http://www.thestyleworks.de/ref/pe_first-letter.shtml. Die Darstellung ändert sich* - von der Angabe padding:0 ausgehend, würde ich allerdings sagen, dass die Darstellung im ersten Block ohne &ndash; nicht stimmt. Und es betrifft auch nur den Firefox Mac - nicht Win. Wenn man padding: 5px sagt, fällts auf.

* also wenn man statt float:left float:none angibt, bzw. keine float-Angabe macht.
 
Zuletzt bearbeitet:
Hey, vielen Dank fuer eure Muehen und die Antworten :)
Ich habe dasselbe Problem mit "&rsaquo;" und "&lsaquo;", jedoch wie 2ndreality mit dem Ampersand nicht. Mehr benannte Zeichen habe ich noch nicht ausprobiert.

Die benannten Zeichen in <span>s zu packen, klingt gar nicht uebel. Ueber PHP ja kein Problem …

Kann jemand bestaetigen, dass dies das Problem im FF/Win und/oder IE/Mac behebt?
 
Kann jemand bestaetigen, dass dies das Problem im FF/Win und/oder IE/Mac behebt?
In FF Win, IE5.5, IE6, IE7 und IE Mac konnte ich das Phänomen nicht feststellen, d.h. der rote Rahmen schließt das "T" ohne Innenabstand ein.

Nur im Firefox Mac und Camino (hab ich gerade upgedatet), und dort wird es durch span ausgeglichen, also nicht padding:0 sondern eher padding: 7px 0;
 
Zuletzt bearbeitet:
  • Gefällt mir
Reaktionen: Galanos
Ich hatte mich mit der "padding:7px 0;"-Variante abgefunden, weil ich es nicht hinbekommen hatte, die Initialen ueber die Hoehe von genau 2 Zeilen laufen zu lassen, obwohl ich dem Fliesstext eine "line-height" von 1.5em und ":first-letter" eine "font-size" von 3em gegeben hatte.
Also war mir eine Box, die etwa 2 Zeilen hoch ist und in der der Buchstabe vertikal mittig steht, recht. Zumindest lieber als eine buendige Box, die per absolutem Wert an die korrekte Stelle gerueckt werden muss.

Falls mir jemand sagen kann, wie ich die Initialen besser hinkriege, wuerde ich mich darueber natuerlich noch viel mehr freuen :)

Danke fuer's Testen, UDH5.
 
FF Linux zeigt's übrigens auch unterschiedlich an.
Mit <span> korrekt.
 
Zurück
Oben Unten