CSS Problem mit Positionierung von Detlef G., 26.02.2007 19:15

CSS Problem mit Positionierung

Olaf 23.02.2007 16:04

Hallo zusammen,

ich möchte im rechten oberen Eck einer HTML Seite per Script ein DIV erscheinen lassen, habe aber Probleme mit der Positionierung im Firefox, im IE wird es richtig dargestellt. So sieht die Testseite aus. Die Sktipte funktionieren, habe sie aber wg. Übersichtlichkeit rausgelassen.

<html>
<head>
<title>test</title>
<meta name="author" content="poell.helmut">
<style>
                           #text1 {
                                 position: relative;
                                 FONT: 11px Verdana, Arial, Helvetica, sans-serif;
                                 color: #007FFF; font-weight: normal;
                                 text-decoration: underline;
                                 cursor: pointer; text-align: right;
                           }

#box {
                                  position: absolute;
                                  left: -130px;
                                  top: 20px;
                                  background-color:#efefef;
                                  color:#000000;
                                  width: 150px;
                                  line-height: 20px;
                                  text-align: left;
                                  background: #FFFFFF;
                                  border: 1px solid #CFCFCF;
                                  padding: 10px;
                                  height: 60px;

}
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000">

<div ID="text1">Ankertext
              <div ID="box" name="box" >
                 <div >Deutsch</div>
                 <div >English</div>
              </div>
</div>

</body>
</html>

Hat jemand eine Idee, warum der Firefox sich querlegt?

Vielen Dank für Eure Hilfe.

Grüsse

Olaf

Beitrag melden

– Informationen zu den Bewertungsregeln

CSS Problem mit Positionierung
wahsaga Homepage des Autors 23.02.2007 16:26

css
– Informationen zu den Bewertungsregeln
hi,

ich möchte im rechten oberen Eck einer HTML Seite per Script ein DIV erscheinen lassen, habe aber Probleme mit der Positionierung im Firefox, im IE wird es richtig dargestellt.

Dann steht zu vermuten, dass du und der IE was falsch machen.

So sieht die Testseite aus.

<html>

Bitte teste mit vollständigen Dokumenten - also auch mit DTD-Angabe, um die Browser nicht in den Quirks Mode zu schicken.

<body text="#000000" bgcolor="#FFFFFF" link="#FF0000">

Nutze bitte CSS, und nur CSS, für die Darstellung.

#box {
                                  position: absolute;
                                  left: -130px;
                                  top: 20px;

Ich dachte, du wolltest was rechts oben ausrichten - warum dann eine absolute Positionierung von links aus?

gruß,
wahsaga

--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
Beitrag melden

–
Informationen zu den Bewertungsregeln
CSS Problem mit Positionierung
kriboe 26.02.2007 17:36

css
– Informationen zu den Bewertungsregeln
Hi Olaf,

ich möchte im rechten oberen Eck einer HTML Seite per Script ein DIV erscheinen lassen, habe aber Probleme mit der Positionierung im Firefox, im IE wird es richtig dargestellt. So sieht die Testseite aus. Die Sktipte funktionieren, habe sie aber wg. Übersichtlichkeit rausgelassen.

#box {
position: absolute;
left: -130px;

Ohne lange recherchiert zu haben: eine (negative) Positionsangabe "Left:-130px;" sieht schon komisch aus. Wenn's denn wirklich in die rechte obere Ecke soll, hätte ich da eine Angabe zu "right:..." vermutet. Der IE positioniert nach meiner Erinnerung oft nicht richtig.
Beitrag melden

–
Informationen zu den Bewertungsregeln
CSS Problem mit Positionierung
Detlef G. 26.02.2007 19:15

css
– Informationen zu den Bewertungsregeln
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

--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Olaf: CSS Problem mit Positionierung