CSS Text aus Div fließt in Text aus Blocklevelelement

B

bivg

0
Ein div (hier gelb) beinhaltet Text. In dieses div ragt ein Link als Blockelement (hier rot).
In Firefox 3.6, Opera 10.53 und IE 8 stimmt der Abstand zum roten Text, in Safari, IE 6 und Chrome fließt die zweite Zeile des gelben Textes in den roten Bereich (siehe Bild). Die übrigen Abstände (rechts, unten) stimmen auch hier.

textAusDivInBlocklevelementfaa46.jpg


Code: 
.red { 
display: block;
float: left; 
clear: left; 
margin-top: 0.2em; 
margin-right: 0.8em; 
margin-bottom: 0.2em; 
padding-left: 0.3em;
font-size: 2.2em; 
letter-spacing: 0.2em; 
text-decoration: none;
}
Code: 
.yellow {
display: block;
margin-left: 8em;
line-height: 1.3;
}
Wie schaffe ich dies zu verhindern?
 
Zuletzt bearbeitet:
Ohne den entsprechenden HTML-Code kann ich dir nicht richtig helfen.

Ich gehe aber mal davon aus, dass der Link Teil der zweiten Zeile ist?

Ich denke
{vertical-align: text-bottom;}

schafft Abhilfe.

Weiterhin sollte das Element ein Inline-Element sein!

… Denke ich. Ohne den HTML-Code schwer zu sagen.
 
HTML: 
<body><div  id="beinhaltetRed">
<a href="#" class="red">Punkt</a>
<a href="#"  class="red">Lorem ipsum</a>
</div>
<div class="yellow">Lorem ipsum dolor sit  amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore  et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud  exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.  Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu  fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident,  sunt in culpa qui officia deserunt mollit anim id est laborum.</div></body>
Code: 
.beinhaltetRed  {
}
Im Bild ist der zweite Link zu sehen (rot).

"display: inline" verändert leider nichts.
"vertical-align: text-bottom" auch nicht. Aber geht das nicht ohnehin nur in Tabellen?

Danke für eure Hilfe!
 
Zuletzt bearbeitet:
Achso, das ändert einiges.

Du musst dem div.beinhaltetRed eine Weite zuweisen, so dass der Link nicht mehr übersteht. Der Container muss bis zur Aussengrenze des Links gehen. Ich hoffe du verstehst was ich mein. Erhöhe width einfach solange, bis es gut aussieht (zusammen mit padding bitte ;))
 
CrAc hat gesagt.:
Du musst dem div.beinhaltetRed eine Weite zuweisen, so dass der Link nicht mehr übersteht.
Zum Vergrößern anklicken....
Oh, da hab' ich mich anscheinend missverständlich ausgedrückt. Ich will, dass der Link in den gelben Text ragt. Aber der Abstand zum "roten Bereich" soll eben auch nach oben stimmen (nicht nur rechts und unten).
 
Zuletzt bearbeitet:
Hmm okay.

Da muss ich erstmal passen. Auf die schnelle fällt mir dazu nichts ein.

Dennoch viel Glück bei der Problemlösung ;)
 
bivg hat gesagt.:
In Firefox [...] stimmt der Abstand zum roten Text
Zum Vergrößern anklicken....
Jetzt wirds eigenartig. Im Ubuntu 10.04-Firefox (3.5.9) stimmt der obere Abstand zwischen rot und gelb auch (wie in Chrome, Safari und IE6) nicht.
(Mein erster Post bezieht sich auf Browser unter Windows XP.)

UPDATE Ich hab' eine Seite gefunden, bei der besagte Browser die gleichen Probleme zeigen: http://www.bigbaer.com/css_tutorials/css.image.text.wrap.tutorial.htm. Hier rutscht der Text zum Beispiel in #sml-03. Eine Lösung hab' ich aber auch hier nicht gefunden, da der Autor dies nicht als Problem zu sehen scheint.
Bei einem Bild kann man ja noch damit leben. Aber mit Text ist das ganze schon erheblich schlechter lesbar.
Außerdem ist hier gleich, dass nur die oberste Zeile jeweils in das Block-Element fließt, alle weitere werden für dieses Block-Element korrekt umgebrochen.

UPDATE Ob ich übrigens mit margin-top oder padding-top arbeite ist für das Problem egal. Beides sieht gleich aus.

UPDATE Ich hatte gehofft, dass das Problem mit Chrome in der neuen Version 5 behoben ist. Bei Firefox klappt's ja auch in der neuesten Version (3.6 und 4-pre-release). Aber leider keine Veränderung.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben