Textbausteine verschachteln

Status
Nicht offen für weitere Antworten.
S

SH-Production

Grünschnabel
Hi zusammen,

habe folgendes vor:
ich möchte Text in einer Textarea eingeben lassen dessen Inhalt dann auf der Webseite zu sehen sein wird. Damit man etwas flexibler ist sollen eigene BBCodes verwendet werden dürfen.
Dazu hab ich mir ein paar HTML Tags genommen und per CSS verändert, so wie ich das will. Also aus nem <cite> wird bei mir z.B ein [UNIMPORTANT] (die Zuordnung seht ihr in meinem CSS als Kommentar)
Jetzt soll der User das ganze auch verschachtelt anwenden dürfen.
Sprich wenn ein Wort in Farbe und unterstrichen sein soll, muss er important und underline verwenden.
Wo mir mein Problem im speziellen auffählt ist "unimportant" in kombi mit "small".
Er sollte mir nun durch nachfolgendes CSS ein Wort sowohl kleiner als auch hellgrau darstellen. Im Safari t das, allerdings funktioniert es im IE mal wieder nicht. Der stellt es entweder mit der falschen Farbe dar oder normal groß. Abhängig von der Reihenfolge der verschachtelten Elemente. Ich nehme an er bezieht das "inherit" auf das umschließende p (blockelement) ?! Stimmt das, bzw. gibts da ein Workaround?


HTML: 
#rightDiv p, #leftDiv p {
	font-size:12px; line-height:12px;
}

/* b - bold */
#rightDiv b, #leftDiv b {
	font-weight: bold;
	font-size: inherit;
	color: inherit;
	text-decoration: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: inherit;
} 

/* big - bigger */
#rightDiv big, #leftDiv big {
	font-weight: inherit;
	font-size: larger;
	color: inherit;
	text-decoration: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: inherit;
} 

/* i - italic */
#rightDiv i, #leftDiv i {
	font-weight: inherit;
	font-size: inherit;
	color: inherit;
	text-decoration: inherit;
	font-style: italic;
	font-family: inherit;
	vertical-align: inherit;
} 

/* u - underline */
#rightDiv u, #leftDiv u {
	font-weight: inherit;
	font-size: inherit;
	color: inherit;
	text-decoration: underline;
	font-style: inherit;
	font-family: inherit;
	vertical-align: inherit;
} 

/* del - delete */
#rightDiv del, #leftDiv del {
	font-weight: inherit;
	font-size: inherit;
	color: inherit;
	text-decoration: line-through;
	font-style: inherit;
	font-family: inherit;
	vertical-align: inherit;
} 

/* em - important */
#rightDiv em, #leftDiv em {
	font-weight: inherit;
	font-size: inherit;
	color: #FF9933;
	text-decoration: inherit;
	font-style: normal;
	font-family: inherit;
	vertical-align: inherit;
} 

/* cite - unimportant */
#rightDiv cite, #leftDiv cite {
	font-weight: inherit;
	font-size: inherit;
	color: #CCC;
	text-decoration: inherit;
	font-style: normal;
	font-family: inherit;
	vertical-align: inherit;
} 

/* code - code */
#rightDiv code, #leftDiv code {
	font-weight: inherit;
	font-size: inherit;
	color: inherit;
	text-decoration: inherit;
	font-style: inherit;
	font-family: Courier;
	vertical-align: inherit;
} 

/* ins - error */
#rightDiv ins, #leftDiv ins {
	font-weight: inherit;
	font-size: inherit;
	color: red;
	text-decoration: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: inherit;
} 

/* sub - sub */
#rightDiv sub, #leftDiv sub {
	font-weight: inherit;
	font-size: 10px;
	color: inherit;
	text-decoration: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: sub;
} 

/* sup - sup */
#rightDiv sup, #leftDiv sup {
	font-weight: inherit;
	font-size: 10px;
	color: inherit;
	text-decoration: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: 4px;
} 

/* tt - ? */
#rightDiv tt, #leftDiv tt {
	font-weight: inherit;
	font-size: inherit;
	color: inherit;
	text-decoration: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: inherit;
} 

/* strike -  */
#rightDiv strike, #leftDiv strike {
	font-weight: inherit;
	font-size: inherit;
	color: inherit;
	text-decoration: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: inherit;
} 

/* s - ? */
#rightDiv s, #leftDiv s {
	font-weight: inherit;
	font-size: inherit;
	color: inherit;
	text-decoration: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: inherit;
} 

/* small - small */
#rightDiv small, #leftDiv small {
	font-weight: inherit;
	font-size:9px;
	color: inherit;
	text-decoration: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: inherit;
/*	vertical-align: middle;*/
}

/* a - link */
a {
	font-weight: inherit;
	font-size: inherit;
	color: inherit;
	text-decoration: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: inherit;
	line-height: inherit;
	height: inherit;
}
 
Hi,

was mir hier direkt ins Auge sticht, sind die festen Schriftgrößen (px), die im IE (<7) zur Folge haben, dass sie sich nicht skalieren (vergrößern / verkleinern) lassen.

mfg Maik
 
Kannst du mir kurz erleutern was mit festen Größen gemeint ist?
Habe bisher immer mit PX gearbeitet.

Dennoch sollte es doch funktionieren, da ich ebenso in small die Schriftgröße fest setze?!
 
"px", "pt" zählen zu den absoluten (festen) Maßeinheiten, "em", "ex", oder "%" hingegen zu den relativen Maßeinheiten - siehe Numerische Angaben.

Moderne Browser skalieren all diese Maßeinheiten, der IE6 (und älter) hingegen nur die Relativen.

mfg Maik
 
Ok dank dir, aber zurück zu meinem Problem.
Die Farbe dürfte es deswegen ja nicht beeinflussen ;)

Also lieg ich da richtig, dass der IE das inherit nicht richtig anwendet?
 
Das wäre mir neu, dass der IE den Vererbungswert inherit nicht unterstützt.

Und soweit ich jetzt stichprobenartig einige deiner angeführten Selektoren überprüft habe, funktioniert darin auch diese Wertangabe bzgl. der Schriftfarbe.

Vielleicht solltest du hier besser ein passendes HTML-Codebeispiel solch eines verschachtelten Textbausteines zeigen, das bei dir im IE falsch interpretiert wird.

mfg Maik
 
Tja... da hast du wohl recht!
Hab gerade den beschriebenen Teil aus meiner Seite extrahiert und ein kleines Beispiel gemacht und siehe da es geht.
Ich werde noch wahnsinnig! Wie finde ich am besten raus woran das liegt?
 
Hi,

indem du uns hier zur Abwechslung mal etwas HTML-Code präsentierst, der sich mit dem Stylesheet im IE betrachten lässt.

Optimalerweise die fehlerbehaftete und die funktionstüchtige Variante, damit man die Quellcodes auch mal miteinander vergleichen kann, denn mit dem CSS-Code alleine kann zumindest ich hier keine Interpretationsprobleme im IE reproduzieren.

Alternativ zu den Quellcodes sind hier auch zwei Links zu den entsprechenden Seitenvarianten gern gesehen und immer willkommen ;)

Achja, in welcher/welchen IE-Version/en treten bei dir überhaupt die Fehler auf?

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück