Bild und Text auf einer Linie / Fehler im IE

[Jens Schärer]

Hallo,

ich möchte gerne ein Bild und einen Text direkt nebeneinander positionieren, hierfür möglichst keine Tabellen verwenden. Ich möchte, dass Bild und Text auf einer Linie stehen, falls das Bild größer/höher wie der Text ist, soll der Text vertikal mittig zum Bild angezeigt werden.
Bei folgendem Code funktioniert das wunderbar im Opera und Firefox, der IE zeigt das Bild nicht an.

<div style="margin: 10px; padding: 5px; background: #EFEFEF; border: 1px solid #999999;">
  <div class="text" style="color: #FF0000;">
    <div style="float: left;"><img src="projects/portaladmin/output/images/buttons/delete.gif" width="16" height="16" alt="" /></div>
    <div><span style="padding-left: 5px;"><b>Das Feld darf nicht leer sein!</b></span></div>
  </div>
</div>

Wenn ich die Hintergrundfarbe des äußersten Divs entferne wird das Bild angezeigt. Es scheint also, als ob sich das äußere Div über die inneren Divs legt. Wie kann ich dies umgehen bzw. im IE beheben?
Mit z-index hab ich schon rumgespielt, hat leider nicht geholfen.

Gruß,
Jens