übles CSS Problem

• Mo, 06. Februar 2006,
• 368 Wörter,
• 3 Kommentare,
• Tags:
• CSS,
• Typografie,
• Website

Es ist soweit, ich finde keine Lösung für ein fie­ses Pro­blem, im neuen Style­s­heet. Unglück­li­cher­weise ist es nicht mal was über­aus Trick­rei­ches, son­dern eine rela­tiv sim­ple Ange­le­gen­heit. Ich habe dem Gan­zen eine eigene Test­seite gewid­met. Es geht um die in den p-Tags gefloa­te­ten span-Elemente. Wie man sieht, wird das span-Element im ers­ten Para­gra­phen anders dar­ge­stellt, als in den fol­gen­den Bei­spie­len. Der Code ist bei allen der glei­che.

<p><span class="inlineHeadRight">innere Headline</span>
Text...
</p>

CSS:
.inlineHeadLeft, .inlineHeadRight {
width: 220px;
float: left;
margin: 0;
padding: 12px 10px 10px 0;
display: inline;
font: 1.6em Georgia, Times, 'Times Roman', serif;
color: #000;
line-height: 134%;
letter-spacing:-1px;
clear: none;
}

span.inlineHeadRight {
float: right;
padding: 11px 0 15px 11px;
}

Ich möchte, dass auch im ers­ten Para­graph, die glei­che Dar­stel­lung statt fin­det, wie in den untern p-Blöcken. Anzu­mer­ken wäre noch, dass IE6, zu mei­nem Erstau­nen genau dies tut. Das Pro­blem betrifft pri­mär Fire­fox und Opera.

Die Ursa­che für das Pro­blem habe ich gefun­den, nur eine CSS-interne Lösung fehlt mir noch. Aus irgend­ei­nem Grund, wird das span im ers­ten Absatz gecla­red. Ursa­che für die­sen Clear, ist das zweite gefloa­tete Div, vor dem content-Div, was eben­falls einen Clear besitzt.

<div class="content">
<div id="entryDetails">...
</div>

<div id="prenextTop">...
</div>

<p>...</p>
</div>

CSS:
.content p {
font: normal .8em Arial, Verdana, Helvetica, sans-serif;
line-height: 140%;
text-align: left;
width: 468px;
margin: 0 0 0 274px;
padding: 3px 20px 12px 0;
}

#entryDetails, #prenextTop{
position: relative;
clear: left;
float: left;
padding:0;
height: auto;
width: 224px;
margin: 0 0 0 30px;
display: inline;
text-align: right;
}

#ent­ry­De­tails und #pren­ext­Top besit­zenfloat: left; und sind zusätz­lich mit einem clear:left; ver­se­hen, genau die­ses clear:left;, des zwei­ten Divs, ist der Übel­tä­ter, der das span-Elemente irgend­wie mit beein­flusst. Mir ist abso­lut unklar, wieso dies statt fin­det. Das span-Element ist inner­halb des p-Tags (wel­ches eine fixe Breite besitzt) iso­liert und dürfte somit nicht im global-Float hän­gen.

Ja es gibt Unmen­gen Lösun­gen, das Pro­blem zu umge­hen, ich möchte es aber lösen. Die p-Tags zu floa­ten oder #ent­ry­De­tails und #pren­ext­Top zu einer Div zu ver­ei­nen funk­tio­nie­ren zwar, aber genau das ver­su­che ich zu umge­hen. Ich möchte die Divs sepa­rat hal­ten, um spä­ter eben mehr Frei­heit in der Gestal­tung zu haben.

Meine Frage also, wie bringe ich das span-Element dazu, nicht aus sei­nem über­ge­ord­ne­ten Block-Level-Element, her­aus zu schauen? Es kann doch nicht sein, dass die äuße­ren Floats der Divs, den Float inner­halb des p-Tags beein­flu­ßen? Es ist genug Platz für alle Ele­mente vor­han­den, nur scheint das erste span-Element, die­sen Platz nicht zu “fin­den”.

Zum gleichen Thema

• Randnotiz - Was von Bühne frei#1 übrig bliebRandnotizen

• Flaute, Krise, DenkpauseOff-Topic

• streamlinedWeb Design

• Updates im Hintergrund erstmal gebremstOff-Topic

• zwei kleine NeuerungenFundstücke

• CSS TextspaltenCSS

• Serverwechsel 0 - Webmaster 1Fundstücke