nicht angemeldet
ineinander verschachtelte inline-Elemente
Mir ist letztens folgendes aufgefallen:
Wenn ich in einem inline-Element ein weiteres Inline-Element einbette und dem inneren ein padding-top und padding-bottom gebe, werden diese paddings wie margins behandelt, d. h. die Abstände werden außerhalb des eingebetteten inline-Elements "angehängt".
Gebe ich dann dem äußeren Inline-Element dasselbe padding, wird das padding, so wie es soll (aber ob das so richtig ist?) innerhalb des eingebetteten inline-Elements angezeigt.
So wie zuerst beschrieben:
-------------------------------------------------------------------
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Develop</title>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<span style="border:1px solid red;">
<span style="border:1px solid green;padding:10px 0px;">
sadsad
</span>
</span>
</body>
</html>
-------------------------------------------------------------------
So, wie es eigentlich sein soll:
-------------------------------------------------------------------
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Develop</title>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<span style="border:1px solid red;padding:10px 0px;">
<span style="border:1px solid green;padding:10px 0px;">
sadsad
</span>
</span>
</body>
</html>
-------------------------------------------------------------------
Soweit im FF. Der IE hingegen zeigt die oberen und unteren Border gar nicht erst an..
Ist das alles nun ein Bug oder ein Feature, das ich nicht durchschaue?
-
Hi!
Wenn mich nicht alles täuscht, darf ein Inline-Element bei XHTML Strict nur innerhalb eines Block-Elements vorkommen. Also nicht direkt im Body.
Das könnte eine Ursache für dein Problem sein.mfG
Benjamin--
Selfcode: ie:} fl:{ br:> va:) ls:< fo:( rl:? n4:# ss:| de:] js:| ch:? sh:( mo:? zu:)
"And all those exclamation marks, you notice? Five? A sure sign of someone who wears his underpants on his head."
(Terry Pratchett)-
Wenn mich nicht alles täuscht, darf ein Inline-Element bei XHTML Strict nur innerhalb eines Block-Elements vorkommen. Also nicht direkt im Body.
Daran kann es nicht liegen. Wenn ich z. B. eine Liste anlege und die Listen-Elemente als inline definiere (damit sie waagerecht nebeneinander stehen), und Links hinein setze, tritt der selbe Effekt auf.
-
Hi $name!
Wenn ich z. B. eine Liste anlege und die Listen-Elemente als inline definiere (damit sie waagerecht nebeneinander stehen), und Links hinein setze, tritt der selbe Effekt auf.
Ich habe das Beispiel aus deinem ersten Posting mal ausprobiert und das innere (grüne) <span /> hat bei mir oben und unten den gewünschten inneren Abstand von 10px. Ich kann dein Problem also nicht nachvollziehen, bzw. ich verstehe dein Ziel nicht.
mfG
Benjamin--
Selfcode: ie:} fl:{ br:> va:) ls:< fo:( rl:? n4:# ss:| de:] js:| ch:? sh:( mo:? zu:)
"And all those exclamation marks, you notice? Five? A sure sign of someone who wears his underpants on his head."
(Terry Pratchett)-
Welches der beiden Bsp. hast Du benutzt?
-
Hi Marc1!
Welches der beiden Bsp. hast Du benutzt?
Ich habe beide in eine Datei gepackt, das sah dann folgendermaßen aus:
(Der IE stellt es nur so dar, wenn ich vor bzw. nach dem jeweiligen Element einige <br /> einfüge... offenbar kann er den zusätzlich benötigten Platz nicht richtig einkalkulieren)mfG
Benjamin--
Selfcode: ie:} fl:{ br:> va:) ls:< fo:( rl:? n4:# ss:| de:] js:| ch:? sh:( mo:? zu:)
"And all those exclamation marks, you notice? Five? A sure sign of someone who wears his underpants on his head."
(Terry Pratchett)-
Aber im FF wird es doch genau so dargestellt, wie ich es gesagt habe. Beim oberen Beispiel hat nur das innere Element padding-top und -bottom und beim unteren Bsp. das innere und das äußere.
-
Hi Marc1!
Aber im FF wird es doch genau so dargestellt, wie ich es gesagt habe. Beim oberen Beispiel hat nur das innere Element padding-top und -bottom und beim unteren Bsp. das innere und das äußere.
Ja, genau so steht es doch aber auch jeweils im Quelltext? Im ersten Beispiel kriegt nur das innere Element ein Padding, im zweiten Beispiel beide. Wie man sieht, hat das grün umrandete innere <span /> den gewünschten Innenabstand und vergrößert sich entsprechend.
mfG
Benjamin--
Selfcode: ie:} fl:{ br:> va:) ls:< fo:( rl:? n4:# ss:| de:] js:| ch:? sh:( mo:? zu:)
"And all those exclamation marks, you notice? Five? A sure sign of someone who wears his underpants on his head."
(Terry Pratchett)-
Hi Benjamin!
Ja, genau so steht es doch aber auch jeweils im Quelltext? Im ersten Beispiel kriegt nur das innere Element ein Padding, im zweiten Beispiel beide. Wie man sieht, hat das grün umrandete innere <span /> den gewünschten Innenabstand und vergrößert sich entsprechend.
P.S.: Was der IE daraus macht ist natürlich mal wieder unter aller Kanone und entspricht absolut nicht der CSS-Spezifikation.
mfG
Benjamin--
Selfcode: ie:} fl:{ br:> va:) ls:< fo:( rl:? n4:# ss:| de:] js:| ch:? sh:( mo:? zu:)
"And all those exclamation marks, you notice? Five? A sure sign of someone who wears his underpants on his head."
(Terry Pratchett)
-
-
-
Jetzt sehe ich meinen Fehler: Der innere vergrößert sich und nicht der äußere...
Ok, damit hat sich das erledigt :D
-
-
-
-
-