Ralle: div nur Größe von Text im IE6

Hallo zusammen,

ich schlage mich mit folgenden Problem herum: Ich versuche ein div über die komplette Browserseite zu legen. Der Abstand zu den Rändern des Browserfensters sollte 10px betragen. Außerdem sollte das div seine Größe dynamisch an die Größe des Browserfensters anpassen, wenn man diese ändert.

Das klappt auch alles wunderbar in den Browsern Mozilla Firefox 2 und Opera 9. Leider entspricht die gewünschte Anzeige aber nicht dem Resultat im Internet Explorer 6. Dieser zeigt das div nur so groß an, wie auch der Text im div ist, er passt also die Größe des divs an seinen Inhalt an.

Hier mal mein Code:

---------------test.html---------------
<body>
  <div id="hintergrund">
    Grauer Hintergrund mit Rand. Abstand nach oben, unten, rechts und links: 10px
  </div>
</body>
---------------------------------------

---------------test.css----------------
#hintergrund {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  bottom:10px;
  background-color:#F3F3F3;
  border:solid;
  border-width:1px;
  border-color:#CCCCCC;
}
---------------------------------------

Hier könnt ihr euch das Beispiel anschauen:
http://www.mitglied.lycos.de/burrrob/test/test.html

Irgendwie kann ich mir nicht vorstellen, dass es zu diesem Problem bisher keine Beiträge gab, leider konnte ich aber keine hilfreichen Postings finden. Freue mich also auf Antworten, tippe auf eine simple Lösung ;)

Gruß Ralle

  1. Hallo Ralle,

    ---------------test.css----------------
    #hintergrund {
      position:absolute;
      top:10px;
      left:10px;
      right:10px;
      bottom:10px;
      background-color:#F3F3F3;
      border:solid;
      border-width:1px;
      border-color:#CCCCCC;
    }

    Ohne es jetzt getestet zu haben, versuche mal bitte folgendes:

    #hintergrund {
       margin:10px;
       background-color:#F3F3F3;
       border:1px solid #CCCCCC; }

    ich habe dies eingesetzt, um ein div immer der Breite des Browsers anzupassen. Mit dem gewünschten Erfolg :-) Ob es auch in der Höhe funktioniert, obliegt deinem Versuch.

    Herzliche Grüße aus Weinsberg
    Helmut Weber

    --
    -------------------------------------------
    Mode ist eine Variable, Stil eine Konstante
  2. Ich versuche ein div über die komplette Browserseite zu legen. Der Abstand zu den Rändern des Browserfensters sollte 10px betragen. Außerdem sollte das div seine Größe dynamisch an die Größe des Browserfensters anpassen, wenn man diese ändert.

    Hier mal mein Code:

    #hintergrund {
      position:absolute;
      top:10px;
      left:10px;
      right:10px;
      bottom:10px;
      background-color:#F3F3F3;
      border:solid;
      border-width:1px;
      border-color:#CCCCCC;
    }

    Das klappt deshalb im IE nicht, weil der die Dimensionierung "von ... bis" nicht versteht.
    Er versteht nur 1 Positionsangabe + Höhe + Breite.

    Man braucht also für ihn ein Workaround.
    Evtl kommst du mit der Technik des feststehenden Footers weiter.

    http://aktuell.de.selfhtml.org/artikel/css/footer/#footer_feststehend_msie

    Grüße
    gaby

    1. #hintergrund {
         margin:10px;
         background-color:#F3F3F3;
         border:1px solid #CCCCCC; }

      ich habe dies eingesetzt, um ein div immer der Breite des Browsers anzupassen. Mit dem gewünschten Erfolg :-) Ob es auch in der Höhe funktioniert, obliegt deinem Versuch.

      Hallo Helmut,
      danke für deine Antwort, ich habe deinen Code getestet, leider passt sich das div tatsächlich nur auf die Breite des Browserfensters an, habe es nicht geschafft die Höhe anzupassen.

      Evtl kommst du mit der Technik des feststehenden Footers weiter.
      http://aktuell.de.selfhtml.org/artikel/css/footer/#footer_feststehend_msie

      Hallo Gaby,
      habe mir mal diese Technik angeschaut und bin auch zu einem einigermaßen zufrieden stellenden Ergebnis gekommen:

      <div id="hintergrund">Grauer Hintergrund</div>

      html, body { margin:0; padding:3px; height:100%; overflow:hidden; }
      #hintergrund { background:#F3F3F3; height:99%; border:solid; border-width:1px; order-color:#CCCCCC; }

      Ich habe also den Content-Container aus dem Beispiel einfach weg gelassen und den Footer, der jetzt meinen Hintergrund darstellt, über die ganze Seite gezogen.

      Bin mir noch nicht so ganz sicher ob ich mit dieser Technik ein komplettes Seitenlayout auf die Reihe bekomme, aber irgendwie wird's schon gehen. Würde mich freuen wenn jemand noch einen anderen Lösungsvorschlag hat, danke jedenfalls für eure Antworten.

      Gruß Ralle