Firefox, <div>-Container

[Shenga]

Warum fehlt der untere Rand des Absatzes in dem <div>-Container im FF?

Hier ein Beispiel

#content
   {
   position:absolute;
   left:10px;
   top:10px;
   width:15em;
   height:15em;
   overflow:auto;
   border:1px solid black;
   }
p
   {
   margin:20px;
   }

Shenga

[Erri]

Hi Shenga,

Warum fehlt der untere Rand des Absatzes in dem <div>-Container im FF?

Wenn ich deine Beispielseite im Firefox 1.0 öffne, werden auch alle Border des Divs angezeigt.
Evtl. lieg es daran, dass deine beiden <p>-Tag innerhalb des Divs nicht geschlossen sind?

Viele Grüße,
Erri

[Shenga]

Hi Erri,

Evtl. lieg es daran, dass deine beiden <p>-Tag innerhalb des Divs nicht geschlossen sind?

Das hilft auch nicht, ich hab's probiert. (Nach HTML 4.01 strict darf ich das weglassen, da erwarte ich von einem Browser, daß er keinen Unterschied macht. Tut er ja auch nicht.)

Danke, und Grüße
Shenga

[wahsaga]

hi,

Warum fehlt der untere Rand des Absatzes in dem <div>-Container im FF?

Hier ein Beispiel

was soll da fehlen?

du hast zwei p mit 20px margin an allen seiten, die den inhalt deines div bilden.
scrolle runter, und du wirst auch unter dem zweiten p noch 20px abstand finden.

gruß,
wahsaga

[Shenga]

Hi, wahsaga

Ich habe runtergescrollt, und das gesehen.

Benutze Firefox 1.0.4

Shenga

[Gernot Back]

Hallo Shenga,

Warum fehlt der untere Rand des Absatzes in dem <div>-Container im FF?

Hier ein Beispiel

Ergänze wie folgt:

  

> #content  
>    {  
>    position:absolute;  
>    left:10px;  
>    top:10px;  
>    width:15em;  
>    height:15em;  
>    overflow:auto;  
>    border:1px solid black;  
>    }  
  
p {  
  margin:0 20px;  
}  
  
* html p{  
  margin:20px;  
}  
  
p:after {  
  content:" ";  
  display:block;  
  height:20px;  
}  
  
p:first-child {  
  margin-top:20px;  
}  

Gruß Gernot

[Shenga]

Hallo Gernot,

schöne Lösung, weil nicht am HTML-code rumpfuscht, so ähnlich habe ich das Problem auch gelöst.

Mich interessiert trotzdem, warum das erste Code nicht wie erwartet dargestellt wird. Gibt es in der Spezifikation eine Erklärung, die ich nicht kenne, oder ist das ein Bug?

Shenga

[Gernot Back]

Hallo Shenga,

schöne Lösung, weil nicht am HTML-code rumpfuscht, so ähnlich habe ich das Problem auch gelöst.

Mich interessiert trotzdem, warum das erste Code nicht wie erwartet dargestellt wird. Gibt es in der Spezifikation eine Erklärung, die ich nicht kenne, oder ist das ein Bug?

Ich denke mal das kann man sich so erklären, dass Opera und Mozilla/Firefox ein Padding-Bottom schon nicht mehr als eigentlichen Content ansehen und somit bei einem die Höhenangabe eines Elements sprengenden Inhalt auf dessen Darstellung bei overflow:auto oder overflow:scroll verzichten. Ich finde aber keine diesbezügliche Spezifikation, was jetzt die "richtige" Darstellung ist.

Mit der Pseudoklasse :after wird aber explizit Inhalt angegeben, auch wenn es sich dabei nur um ein Leerzeichen handelt. Heikel ist die Lösung nur in sofern, als dass ja nicht auszuschließen ist, dass der IE dies nicht doch in einer späteren Version mal interpretiert und dann das doppelte "Padding-Bottom" darstellt.

Gruß Gernot

[Detlef G.]

Hallo Shenga,

Warum fehlt der untere Rand des Absatzes in dem <div>-Container im FF?

Weil er bzw. seine Programmierer wohl meinten, dass für keinen Inhalt nicht
extra gescrollt werden muss.

Wenn du padding statt margin verwendest wird dieser berücksichtigt.

Auf Wiederlesen
Detlef