Top & bottom Angabe bei einem DIV im IE?

Status
Nicht offen für weitere Antworten.
L

lupoli

Grünschnabel
Hallo zusammen,
kann es sein, dass der IE zu blöd dafür ist, folgendes richtig darzustellen, oder sehe ich eifach den Fehler nicht? :suspekt:
Code: 
<body>
<div style="position:absolute;top:20px;border: 1px solid red;bottom:20px;">Hallo</div>
</body>

Eigentlich müsste dies ja ein Div geben, dass 20px Abstand vom oberen und unteren Browserfenster hat.. beim Firefox ist's so, aber beim IE.... der mag mich wohl nicht :mad:

Any ideas?
 
Vielleicht interpretiert Firefox das anders und macht das Teil entsprechend groß. Aber normalerweise benutzt man top und left oder bottom und right, etc. Also eine X und eine Y-Angabe. Aber nicht 2 Y-Angaben gleichzeitig. ;)
 
Das mit den top/bottom und dem Firefox/IE kann ich bestätigen.
IE interpretiert bei solchen konstrukten nur das Top, das botom nimmt er nicht richtig.. weiss der Geier warum. :suspekt:
versuch ein bisschen mit border und margin und so zu erperimentieren.. bei mir führte das am Ende zum Erfolg.
 
Ok, diese Anwendung kommt wohl eher selten vor, aber dennoch, so unlogisch ist sie ja nicht. Wie könnte ich denn sonst ein Div erstellen, das so augerichtet ist?
Wenn ich beide y-Werte angebe, so wird automatisch die Höhe dieses Divs bestimmt.
Sprich die Höhe resultiert aus der Browserfenster-Höhe - top vom div - bottom vom div.

Ich könnte natürlich auch sagen top: 20 px und height= browser-höhe - 40px
Nur das geht ja wohl nicht... oder? CSS kann ja nicht rechnen... :confused:

greets
lupoli
 
Ohne Garantie dass das in allen browsern so funktioniert:

magin-bottom:40px;

Ich nehme an auf diese 40px soll irgendetwas anderes drauf?
Wenn nicht: versuche es mit

body {padding-bottom:40px}
 
Hallo lupoli,

mit den Descriptoren "position, top, right, bottom, left" legst du die Position eines Elementes aber nicht die Größe fest. Die Größe eines Elements wird mit "width, height" bestimmt.
So wie du das machen willst geht das wohl nicht.
 
hela hat gesagt.:
Hallo lupoli,
So wie du das machen willst geht das wohl nicht.
Zum Vergrößern anklicken....
...zumindest nicht mit dem IE! :mad:

Gäbe es dazu einen Workaround für den IE?
Schlussendlich möchte ich nix anderes als ein Div haben, dass von oben und unten 20px Abstand zum Fenster hat. Aber so, dass ich zwischen 0 und 20 noch was rein tun kann,
und am unteren Rande auch noch etwas (von gesamthöhefenster - 20 bis gesamthöhefenster).

Mit etwas tüffteln habe ich folgendes geschafft:

Code: 
<body style="padding-bottom:20px;padding-top:20px;margin:0px;">
<div style="border:1px solid red;width=100%;height:99%;margin-left:20px;margin-right:20px;">hallo</div>
</body>
height ist beim div auf 99% gesetzt, weil sonst im Firefox nen Scrollbalken erscheint, den es eigentlich gar nicht bräuchte... weiss jemand, wieso?

Aber leider kann ich mit dieser Variante keine Kopf und keine Fusszeile haben.. :(
 
Hi,

ich hoffe, ich habe Dein Problem richtig verstanden.
  • Dein Layout soll immer 100% Höhe des Anzeigebereichs einnehmen
  • Oben und unten sollen sich jeweils 20 Pixel Kopf- bzw. Fusszeile befinden
  • Der Contenteil soll scrollbar sein
Wie Du schon festgestellt hast, funktioniert eine Grössenangabe über top und bottom nur
im IE nicht.
Deshalb muss auf einen Trick zurückgegriffen werden. Es wird der Box-Model-Bug
des Internet-Explorers ausgenutzt. Und zwar die Eigenschaft, dass die Breite der Rahmen
in die Grössenangaben mit einfliessen. Damit wir es möglich, dem Inhalt 100% Höhe zu geben
und den Abstand von oben und unten mit Hilfe von Rahmen zu realisieren.
Mit Hilfe eines CSS-Filters wird das entsprechende CSS so verändert, dass es nur von IEs
interpretiert werden kann.

Im Einzelnen muss folgendes angepasst werden:
  • Zurücksetzen aller Positionswerte (top, bottom) auf Null
  • Höhe des Bereichs auf 100% setzen
  • Einrücken von oben um die Höhe des Kopfbereiches durch Angabe einer
    Rahmenstärke, die der Höhe des Heads entspricht.
  • Einrücken von unten um die Höhe des Fussbereiches durch Angabe einer
    Rahmenstärke, die der Höhe des Footers entspricht.

Footer und Header werden absolut in einer höheren Ebene (z-index) positioniert, so dass
sie den entstandenen Rahmen bedecken.

Beispieldokument:
HTML: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="author" content="Quaese" />
<style type="text/css">
<!--
body, html{ margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            overflow:hidden;}	/* Scrolling zunächst ausschalten -> im ContentDiv einschalten */
body{ background-color: #f6f6f6;
      font-family : "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
      font-size: 12px;}

/* Footer */
#headDiv{ position: absolute;
          height: 19px;
          width: 100%;
          top: 0;
          border-bottom: 1px solid #d4d0c8;
          z-index: 5;}

/* Positionierung für Nicht-IE-Browser */
#mainDiv{ position: absolute;
          top: 20px;
          bottom: 20px;
          z-index: 1;       /* Content-Ebene tiefer als Footer und Head! */
          width: 100%;
          overflow: auto;}  /* Scrollen bei Übergrösse wieder aktivieren*/
/* CSS-Filter: Positionierung des Content-Divs im IE */
*html #mainDiv{ top: 0;
                bottom: 0;
                height: 100%;
                border-top: 20px solid #f6f6f6;
                border-bottom: 20px solid #f6f6f6;}

/* Footer */
#footerDiv{ position: absolute;
            height: 19px;
            width: 100%;
            bottom: 0;
            border-top: 1px solid #d4d0c8;
            z-index: 5;}
-->
</style>
</head>
<body>
    <div id="headDiv">Header</div>
    <div id="mainDiv">
        <div style="height: 1200px;">Container zum Erzeugen von Höhe</div>
    </div>
    <div id="footerDiv">Footer</div>
</body>
</html>
Hoffentlich kannst Du damit etwas anfangen.

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück