<div> als Behälter für Bild und Unterschrift

[Tom]

Hello,

ich habe folgendes CSS:

div.img-area
    {
        float:left;
        text-align:left;
        margin-right:10px;
    }

div.img-frame
    {
        border:1px solid blue;
        margin:4px;
        padding:2px;
    }

div.img-frame img
    {
        width:220px;
    }

p.img-legend
    {
        margin-left:5px;
        margin-top:5px;
        font-style:italic;
        overflow:hidden;
    }

HTML:

<div class="img-area" style="margin-right:10px;">
            <div class="img-frame"><img
                src="images/radfahrer.jpg"
                alt="Bild aus der Jugendzeit: XXXXX als Radfahrer"></div>
            <p class="img-legend">Jugendzeit als Radfahrer</p>
        </div>
        <p>Ich wurde XXXX text text geboren. Text text text text.
           Text text text text. Text text text text. Text text text text.</p>

Um für ein Bild nebst Bildunterschrift einen Behälter zu bilden, der umflossen werden kann, gibt es die Klasse ".img-area". Um um das Bild einen Rahmen ziehen zu können, gibt es die Klasse ".img-frame".

Wenn ich jetzt versuche, der img-area ein margin-right:10px; beizubringen, wird dies vom Firefox nicht beachtet. Der IE6 beachtet den Wunsch allerdings.

Wenn ich "margin-right:10px;" als inline-Style in das betroffene DIV aufnehme, wird es auch vom Firefox beachtet.

Wo ist nun mein Denkfehler?

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg