Markus: Probleme mit FF und Positionierung

Hallo,

ich habe folgenden Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
 <style type="text/css">

*{
 border:0;
 margin:0px;
 padding:0px;
}

body{
text-align:center;
height:100%;
}

bTest{
text-align:center;
position:absolute;
}

.bigBox{
position:relative;
height:100%;
width:500px;
background-color:black;
margin-left:auto;
margin-right:auto;
}

.topBox{
position:relative;
height:100px;
width:80%;
background-color:red;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
}

.left_box,
.right_box{
position:relative;
height:100px;
width:40%;
background-color:yellow;
text-align:right;
}

.right_box{
float:right;

}

.left_box{
background-color:blue;
text-align:left;
}

.littleleft_box,
.littleright_box{
position:relative;
height:50px;
width:50%;
background-color:orange;
}

.littleleft_box{
background-color:green;
}

</style>

</HEAD>
<Body class=bTest>

<div class="bigBox">bigBox
 <div class="topBox">topBox</Div>
 <div class="right_box">right_box
  <div class="littleright_box">littleright_box</Div>
 </Div>
 <div class="left_box">left_box
  <div class="littleleft_box">littleleft_box</Div>
 </Div>
</Div>
<span>Test</span>

</Body>
</html>

Die "littleright_box" hätte ich jetzt auf der rechten Seite erwartet... so wie es auch der IE anzeigt.... im FF hängt sie links an der Kante von dem div "right_box".

Habe jetzt schon über eine Stunde mich daran versucht.... leider ohne Erfolg.

Hat jemand eine Lösung, oder eine bessere Idee um die gleiche Darstellung zu erreichen ?

Gruß
Markus

  1. Hallo Markus,

    Die "littleright_box" hätte ich jetzt auf der rechten Seite erwartet... so wie es auch der IE anzeigt.... im FF hängt sie links an der Kante von dem div "right_box".

    Ich sehe keine Stelle im CSS-Code wo ich erwarten würde, dass die die littleright_box rechts ausrichtest.

      
    position:relative;  
    height:50px;  
    width:50%;  
    background-color:orange;
    

    scheint kein Grund zu sein, sich rechts auzurichten. Da frag ich mich eher, wie der IE auf die Idee kommt, die Box müsste nach Rechts. Vielleicht denkt er text-align müsste sich auch auf relativ positionierte Boxen auswirken? Wäre natürlich totaler Schwachsinn.

    Jonathan

    1. .littleright_box{
      right:0;
      text-align:right;
      }

      geht auch nicht..

      1. Hi Markus,

        .littleright_box{
        right:0;
        text-align:right;
        }

        geht auch nicht..

        Kann ja auch garnicht, versuche es mal mit einem float:right; und entferne das right:0; .

        Mehr zum Thema float erfährst du gleich hier.

        Grüße,
        Engin
         GYRO

        1. ... das war es... 1000 Dank !

          Schliesse Dich in mein Nachtgebet mit ein ;-)

          Gruß
          Markus

      2. Hallo Markus,

        .littleright_box{
        right:0;
        text-align:right;
        }

        text-align gilt für Text, wie der Name schon sagt, nicht für irgendwelche boxen.

        Jonathan

  2. Hi Markus,

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    <HTML xmlns="http://www.w3.org/1999/xhtml">

    Was willst du denn nun benutzen, HTML oder XHTML? Wenn ersteres, dann entferne letzteres. :)

    <div class="bigBox">bigBox
    </Div>

    Gibt es einen Grund dafür, das deine öffnenden divs klein und die
    schliessenden Divs Gross geschrieben sind?

    Wenn Nein, dann schreib alles klein, wenn du die möglichkeit hast, mit deiner Seite den Validator
    zu besuchen, so nutze sie. Bei gelegenheit vielleicht auch diesen kollegen einen Besuch abstatten.

    Grüße,
    Engin
     GYRO

    1. Danke für den Hinweis !
      Ist geändert, allerdings besteht mein ursprüngliches Problem immer noch ;-)

      1. Problem ist gelöst... Danke für die Hinweise.

        Gruß
        Markus