Inline in Inline - die Frage der Ausdehnung ;)

[prego]

Hi,

ich hab hier grade ein Inline-Level verständnissproblem.

Ich möchte einem Bild, das sich in einem Link befindet einen grafischen rahmen verpassen.

<div class="bild_mit_rahmen">
  <a href="#">
    <img src="foo.jpg" border="0"/>
  </a>
</div> 

Dazu kommt folgende Stylesheet definition:

DIV.bild_mit_rahmen A { 
  background: url('rahmen_links.gif') 0px 0px no-repeat;
}

DIV.bild_mit_rahmen A IMG {
  background: url('rahmen_rechts.gif') right top no-repeat;
} 

Leider ist es aber jetzt so, das das inner Inline-Element (IMG) das äußere (A) nicht in der Höhe beeinflusst. Auch wenn ich das IMG durch ein SPAN ersetze und dort die Schrifthöhe größer als die des A-Tags mache, fließt es über das A-Tag hinaus.

Das ganze ist zumindest im Firefox und Opera so, im IE6 und IE7 funktioniert das bestens, weil die das äußere Inline-Element (A) auf die Höhe des inneren Inline-Elements (IMG) ausdehnen.


Ich denke ich werd das ganze mit Blocklevel-Elementen machen müssen, oder zumindest das A-Tag auf display: block setzen...

Meine Fragen aber nun dazu:
Warum ist das so? Ein Link oder ein Suchwort wären nett....
Wer hat Recht? IE6/7 oder Firefox/Opera
Wie löse ich sowas am besten? Ein Schubbser in die richtige Richtung reicht mir


Dank euch schonmal....

[Kropff]

a {display: block;}
img {display: block;} 

peter

[prego]

Danke Peter,

aber ich habs mtwl auch schon gelöst - das war nicht das Problem. Mir gings ja mehr um das theoretische...

Aber die dritte Frage ist damit beantwortet