CSS Problem mit Positionierung

[Detlef G.]

Hallo Olaf

... im IE wird es richtig dargestellt.

Das würde ich nicht sagen.
Dort wird es fälschlicherweise so dargestellt, wie du es willst. Auch Opera und andere Browser zeigen es so an, wie Firefox.

  

>    #text1 {  
>    position: relative;  

Damit bezieht sich die Angaben bei position:absolute der Nachfahrenelemente (also #box) nicht mehr auf den Viewport sondern auf dieses Element.

»»    ...  

>    text-align: right;  

Damit werden nur Text und Inlineelemente innerhalb von #text1 rechts ausgerichtet. Das Blockelement, auf das sich die Positionierung von #box bezieht, bleibt dort, wo sie ohne auch wäre.
(Gib zum testen mal einen Border oder eine Hintergrundfarbe für #text1 an.)

»»  #box {  

>    position: absolute;  
>    left: -130px;  

Also 130px links von der linken Kante von #text1. Genau dort stellt der Firefox das auch dar. Der IE macht es mal wieder falsch.
Und du machst den Fehler, es erst passend für den IE zu basteln, und erst dann in Browsern zu testen. Mache es andersherum! Es ist einfacher spätere Anpassungen für den IE vorzunehmen, wo es unbedingt nötig ist, als erst mit dem IE zu entwickeln, der vieles eher zufällig so anzeigt wie gewünscht, obwohl es laut Standard ganz anders sein müsste.

»»    top: 20px;  

Dieser Abstand ist doch abhängig von der Zeilenhöhe. Da wäre em doch passender.

»»    ...  

>    width: 150px;  
>    line-height: 20px;  
>    ...  
>    height: 60px;  

Weißt du so genau, wie groß die Schrift in meinem Browser ist, dass das dann auch wirklich passt?

<div ID="box" name="box" >

Div hat kein name-Attribut!

Warum verwendest du überhaupt so viele Divs? Hast du keine passenderen HTML-Elemente gefunden?

Hat jemand eine Idee, warum der Firefox sich querlegt?

Ja, weil er sich (meist) an die Standards hält.

Nun nochmal zu deinem Problem:
Warum positionierst du mit left: -130px; anstatt z.B. right:40px; zu nehmen?

Auf Wiederlesen
Detlef