mormel: img wird aus div rausgeschoben

hallo

bei unten angefügten Code tritt folgendes Problem auf: der IE7 stellt ausnahmsweise alles richtig dar, FF und Opera schieben die Grafik nach unten aus dem div-Bereich heraus und packen auch noch etwas Abstand dazu. Weiß jemand wieso?

danke
mormel

#log {  
 position:absolute;  
 margin:0;  
 padding:0;  
 top:56px;  
 left:10px;  
 width:955px;  
 height:21px;  
 font-weight:bold;  
 background-color:#DAF2EF;  
 border:1px solid lime;  
}  
#log p {  
 margin:5px 8px 3px 8px;  
 padding:0;  
 font-weight:bold;  
 line-height:11px;  
}
<div id="log">  
 <p>Herzlich willkommen</p>  
 <img src="<?= PIXEL ?>rahmen/955/unten.gif" alt="">  
</div>
  1. hallo

    Hallo,

    bei unten angefügten Code tritt folgendes Problem auf: der IE7 stellt ausnahmsweise alles richtig dar, FF und Opera schieben die Grafik nach unten aus dem div-Bereich heraus und packen auch noch etwas Abstand dazu. Weiß jemand wieso?

    Dein div-Element hat eine Höhe von 21 Pixeln. Das p-Element hat ein margin und höhenrelevanten Inhalt.
    Wie hoch ist denn die Grafik? Vermutlich _zu_ hoch ...

    Gruß, Volker

    1. Hallo,

      Dein div-Element hat eine Höhe von 21 Pixeln. Das p-Element hat ein margin und höhenrelevanten Inhalt.
      Wie hoch ist denn die Grafik? Vermutlich _zu_ hoch ...

      Die Grafik ist 2 px groß,  das p-Element ist nicht zu groß, hab mal einen Rehmen drum gelegt, da ist unten noch genug platz.

      danke mormel

      1. hi,

        Die Grafik ist 2 px groß,  das p-Element ist nicht zu groß, hab mal einen Rehmen drum gelegt, da ist unten noch genug platz.

        Und die margins hast du dabei auch berücksichtigt ...?

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
      2. Die Grafik ist 2 px groß,  das p-Element ist nicht zu groß, hab mal einen Rehmen drum gelegt, da ist unten noch genug platz.

        Was willst du mit der Grafik denn machen? Am unteren Rand des divs platzieren?
        Ansonsten lade den Code mal auf einen Webspace, so dass man das Werk begutachten kann.

        Gruß, Volker

        1. Hallo,

          Was willst du mit der Grafik denn machen? Am unteren Rand des divs platzieren?

          genau das

          Ansonsten lade den Code mal auf einen Webspace, so dass man das Werk begutachten kann.

          http://fam-thomas.de/selfhtml/rahmen/test.html

          Ich hab mal extra einen Rahmen ums div und ums p gemacht, damit man sieht wo sie enden.

          Danke für eure Mühe

          gruß mormel

          1. hi,

            http://fam-thomas.de/selfhtml/rahmen/test.html

            Ich hab mal extra einen Rahmen ums div und ums p gemacht, damit man sieht wo sie enden.

            Und da soll jetzt das Problem irgendwo erkennbar sein ...?

            Wo denn?

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
            1. Hallo,

              http://fam-thomas.de/selfhtml/rahmen/test.html
              Und da soll jetzt das Problem irgendwo erkennbar sein ...?
              Wo denn?

              wie bereits geschrieben im FF und Opera siehts so aus. die Grafik unter der blau umrandeten Box befindet sich eigentlich in dieser Box...

              gruß mormel

              1. hi,

                http://fam-thomas.de/selfhtml/rahmen/test.html

                wie bereits geschrieben im FF und Opera siehts so aus.

                Ja, das darf so wohl auch erwartet werden.

                Das äussere Element ist 21px hoch, da passen also P mit seiner eigenen Höhe und seinen margins und das Bild nicht rein.

                Bzgl. overflow hast du keinerlei Angabe gemacht, also kommt der Default visible zum tragen.

                die Grafik unter der blau umrandeten Box befindet sich eigentlich in dieser Box...

                Täte sie vielleicht dann, wenn Platz für sie da wäre.
                Da kein Platz für sie da ist, befindet sie sich ausserhalb der definierten Maße der Box. Der IE macht hier bzgl. height und overflow natürlich wieder seinen altbekannten Fehler.

                gruß,
                wahsaga

                --
                /voodoo.css:
                #GeorgeWBush { position:absolute; bottom:-6ft; }
                1. Hallo,

                  Das äussere Element ist 21px hoch, da passen also P mit seiner eigenen Höhe und seinen margins und das Bild nicht rein.

                  ok, danke, hab dem p jetzt margin:0 und dafür padding gegeben und den padding von der Höhe abgezogen - und es geht.

                  Danke!
                  mormel