Problem Div Position

[Gouvernator]

Hallo Leute!

Hab mich irgendwie verzettelt. Ich kriege es nicht hin, dass der div id="bads-mf" im IE und Firefox an der gleichen Stelle angezeigt wird.

Im Firefox Browser wird der div id="bads-mf" 20 px höher angezeigt als im Internet Explorer.

Was mache ich falsch?

CSS-Code:

#bads {
   align: center;
   text-align: right;
   height: 60px;
   width: 480px;
   margin-left: 50px;
   padding: 0;
   border: 1px solid #ccc;
   background:url(images/ico-ads.gif) no-repeat; 
}
#bads-mf {
   width: 360px;
   left: 129px;
   top: -32px;
   position: relative;
   visibility: visible;
   text-align: left;
   margin: 0; padding: 0;
}

HTML-Code:

<div id="bads">
<a href="[URL]http://www.x.de/[/URL]" target="_blank"><img src="images.jpg" alt="" height="60" width="468" border="0" /></a>
<div id="bads-mf">
<a href="[URL]http://www.x.de/[/URL]" target="_blank">Titel</a>
</div>
</div>

 

[neuroleptika]

Im Quirks Mode (und im IE6) wird height: 60px; mie min-height behandelt.
Bei den zusätzlichen 20px handelt es sich dann um die Unterlänge von img.
DOCTYPE-Switch: Unerklärliche Lücken zwischen Elementen

 

[Gouvernator]

Also ich bin die Lösungsansätze mal durch gegangen und habe einige Variationen durchgenudelt. ^^

Hat leider nichts gebracht.

Kannst Du mal schreiben wie der CSS Code korrekt sein müsste? Vielleicht finde ich dann meinen Denkfehler.

 

[Gouvernator]

Hab das jetzt über float gelöst. Ist das so annehmbar? ^^

#bads img {
   float: right;
}

 

[neuroleptika]

Ja,
solange #bads eine feste Höhe hat reicht float für img.

Eigentlich sollte das nur bis IE6 nötig sein. Ab IE7 wird height korrekt behandelt.
Ansonsten stimmt mit dem Doctype etwas nicht (quirks mode).