div problem: alignment background-image und bild in container

[cogitatio]

Hallo!

Habe ein Problem mit IE. In firefox gehts gut:
Will ein bild im DIV mit dem Hintergrundbild des Containers anpassen.

http://www.tutorials.de/attachment.php?attachmentid=12210&stc=1

Wie Ihr seht gibt es im IE einen Versatz. Wie kann ich den umgehen?

Hier HTML (in TD mit ID="rightcol"):

<div class="info">
<div class="clr"><img src="img/clr_black.gif" width="32" height="21" alt="" border=0>schwarz</div>
<div class="clr"><img src="img/clr_black.gif" width="32" height="21" alt="" border=0>weiß</div>
</div>

CSS:

#rightcol .clr {
padding:0;
margin: 0 -5px 5px 15px;
background-image: url("/produkte/caps/img/bg_color.gif");
height: 21px;
background-position: 0 0px;
}
#rightcol .clr IMG {
vertical-align: middle;
border: 0.1 solid red;
padding: 0;
margin: 0px 0 0 0;
}

Danke für die Hilfe!
Falk

 

[webdesign]

Ich kenne das Problem, hatte ich auch schon mal.
Man könnte es so lösen, dass man mit JavaScript fragt, welcher Browser benutzt wird und dementsprechend anderst positioniert, ist aber recht aufwendig.
Gruss Jonas

 

[cogitatio]

Ich kenne das Problem, hatte ich auch schon mal.
Man könnte es so lösen, dass man mit JavaScript fragt, welcher Browser benutzt wird und dementsprechend anderst positioniert, ist aber recht aufwendig.

Das ist aber keine adäquate Lösung für das Problem. Ich suche schon eine CSS Lösung. Unterschiedliche CSS für die verschiedenen Browsertypen wäre machbar. Nur ist das ganz nicht mit dem 1PX verschieben des background-image getan. Da sieht man nämlich noch den Versatz.

Hat sonst noch jemand eine Lösung parat? Sonst muss ich wohl doch wieder auf Tabellen umsteigen.

Gruß
Falk

 

[Quaese]

Hi,

Du könntest einen CSS-Filter verwenden. Klassen die mit *html eingeleitet werden,
werden nur vom IE interpretiert. Damit könntest Du zum Beispiel die Position des Bildes
für den IE nachträglich nach oben bzw. unten korrigieren.

*html #info .clr IMG { margin-top: -20px;}

Vielleicht hilft Dir das ja weiter.

Ciao
Quaese

 

[cogitatio]

Hab das Problem erkannt und gebannt.
DIV und IMG sind jeweils 21px hoch. Die Schrift war 10px. Durch das vertical-align: middle Rechnet IE irgendeinen quatsch (wahrscheinlich der altbewährte rundungsfehler) und man erhält immer einen Versatz, egal ob man nun das Bild einen Pixel versetzt oder nicht.

LÖSUNG: Fontsize auf 11px gesetzt. Alles funktioniert wunderbar. Also bei vertical-align drauf achten dass man sizes nimmt die beider gerade oder ungerade sind. Natürlich nur wenn man mit einem hintergrundbild alignen möchte.