Buttons, Bilder white-space

[Dieter Raber]

Hallo,

Ich arbeite an einem CMS Baustein, bei dem in einem Popup-Fenster eine Toolbar aus Buttons dargestellt wird.
Die eigentliche Bar (id="tools") ist ein div mit background-color:buttonface, die Buttons selbst sehen so aus:

<button type="button" title="L&ouml;schen">
  <img src="pics/remove.gif" alt="L&ouml;schen" /> L&ouml;schen
</button>

und die entsprechenden Styles so:
#tools {
  border-bottom:2px groove buttonface;
  background:buttonface;
}

#tools button{
  height:24px;
  padding:2px;
  border-width:1px;
  background-color:transparent;
  font:menu;
}

#tools button img{
  float:left;
  margin-right:5px;
}

und das Ergebnis in Firefox so:

Probleme:

• Im IE ist der Text nicht sichtbar, da er unter die Bilder rutscht. Eine feste Breite der Buttons loest das Problem, eine flexible Breite waere mir aber lieber.
• In Gecko sind die Bilder nach dem Oeffnen des Fensters oft erstmal nicht sichtbar und erscheinen erst nach einem Reload.
• Unter der Toolbar befindet sich eine Textarea, die den Rest der Seite einnehmen sollte, zumindest in etwa. Ich habe body und html auf 100% Hoehe gesetzt, die Textarea auf 95%. Im Firefox haut das auch hin, im IE ist sie aber nur ein paar Zentimeter hoch.

Habt Ihr dazu irgendwelche Ideen?

Gruß,

Dieter