Weshalb verschiebt sich ein SPAN-text, sobald ein zweites SPAN mit Text eingefügt wird

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

ich komme einfach nicht hinter den Grund für dieses Phänomen:

Hintergrund: Ich nutze GreaseMonkey, um ein Overlay in Form eines iFrame in ein Browsergame einzufügen. Innerhalb des iFrame werden mehrere Zeilen dargestellt, die an den Zeilen im Hintergrund ausgerichtet sein sollen.

Problem: Wenn ich ein SPAN Tag mit einem Text (rot hinterlegt) einfüge, wird der Text oben in der verfügbaren Box dargestellt (siehe Bild, links). Wenn ich einen zweiten, leeren SPAN Tag einfüge, passiert noch nichts. Doch sobald ich Text in das zweite SPAN Tag einfüge, rutschen beide Texte nach unten, teilweise sogar aus der bbox des Zeilen-DIV hinaus. Warum passiert das und/oder wie kann ich das verhindern?

Die beiden SPAN Tags sind gleich und können auch gegeneinander ausgetauscht werden, der Effekt bleibt derselbe. Übrigens passiert das auch, wenn statt des zweiten SPAN z.B. ein IMG-Tag eingefügt wird.

Hier die Screenshots mit einem und mit zwei SPAN Tags (in Zeile 1):

span_verschiebung
span_verschiebung2109×477 351 KB

Bei Fragen bitte nachfragen.

Vielen Dank
Michael

#6

guck ich mir gleich mal an ,
das mit dem DIV und SPAN ist folgendes , dein DIV hängt auf einer Zeile (oder absolute auf position) ,
deine SPANS aber sind immer Zeilenorientiert , wenn also die SPANS zu breit sind und kein Platz finden dann verschieben sie sich ,
wenn das DIV z.b. eine feste höhe hat, rutschen diese einfach eine Zeile weiter und somit sind sie nicht mehr im DIV sondern irgendwo weiter unten oder rutschen halt raus weil das div kleiner ist als zwei SPAN zeilen :wink:

1 Like
#3

Ok, werde ich nachher tun, sobald ich wieder am Rechner bin.

Der iFrame Inhalt ist straight forward. Es gibt nur die Styleänderungen, die im head style-Tag und inline definiert sind. Der FF Debugger zeigt keine weiteren CSS Attribute an, aber ich könnte Firebug zur Prüfung aktivieren. Vielleicht liefert der Informationen zu automatisch gesetzten Styleattributen.

#4

Weder sehe ich wie groß dein Iframe ist ,
noch wie dein DIV aufgebaut ist ,
ein irtum ist auf jedenfall , das ein SPAN im DIV auch sichtbar im DIV sein müsste.
SPAN ist Zeilenorientiert , wenn du also das DIV overflow:hidden machst, dann sollten die SPAN im schlimsten fall sogar gar nciht sichtbar sein .
SPAN elemente passen sich der größe des übergeordneten DIV an aber nutzen so einige Abstände . Offt ist also das DIV nicht groß genug bzw bietet nicht genug platz für die SPAN elemente . Wenn dann noch abstände die vererbt werden hinzukommen dann passiert genau was du sagst . Im zweifel alles direkt formatieren so das nichts vererbt wird etc .

#2

Am besten mal die Seite Online Stellen dann kann man mit DEV Tools mal nachgucken was der SPAN an CSS bekommt .

#5

Ich verstehe nicht ganz. Das DIV und sein Inhalt ist unten im Debuggerbereich zu sehen und seine Formatierung im Style-Tag unter div.itemline

Sie sind sichtbar, das ist nicht mein Problem. Ich wüsste nur gern, warum der Text oder das ganze SPAN-Tag nach unten verrutscht, sobald man ein zweites sichtbares Element (SPAN mit Text oder Image) dahinter einfügt.

Das ist wahrscheinlich die Ursache des Problems. Welche Attribute kann man noch zurücksetzen, außer margin, padding, font-size und line-height?
Ich habe schon extra die Margins explizit auf 0 gesetzt, Padding muss ich noch konsequent auf 0 setzen. Aber ich habe beide nie gesetzt, also könnte es sich nur um implizit gesetzte Attribute handeln. Dann frage ich mich aber, warum es nur auftritt, wenn das zweite sichtbare Objekt dazu kommt. Es liegt aber nicht am zweiten SPAN mit Text selbst, denn ich kann auch beide austauschen, mit demselben Effekt (bei einem = keine Verschiebung, bei zweien die Verschiebung).

Hier ist der Code der beiden iFrames (um ein paar irrelevante Zeilen der Auflistung gekürzt):
iframe code mit offset
iframe code ohne offset

#8

Danke für Deine Anregungen. Ich habe gerade dem absoluten
div itemline eine feste Breite von 100px gegeben, aber die beiden SPANs
werden immernoch verschoben. Mich wundert auch, dass nicht nur das
zweite SPAN in die neue Zeile rutscht, sondern beide unten platziert
werden. Als ob sie unten gebunden sind und sich die Höhe des DIVs
verändert. Aber wenn ich es richtig sehe, bleibt die gleich, nur die
SPANs rutschen runter (und dabei teilweise raus - aber das ist nicht so
schlimm wie die Verschiebung selbst). Wenn gar nichts geht, muss ich die
auch absolut positionieren. Aber ich hasse es so, dass ich immer wieder
an unverständlichen CSS/HTML Formatierungen scheitere.

Kannst Du Dir noch eine Lösung vorstellen, mit der ich dieses Verschieben beider Elemente verhindern kann?

VG
Michael