CSS Frage: CSS Box Schatten

[Escapado]

Hallo zusammen

Ich habe eine Frage zu dem Box-Shadow in CSS..
Ich habe auf meiner Testseite ein
Bild eingefügt und möchte nun, dass dieses Bild einen Schatten wirft.

Nun liegt das Bild in einem Div

 <div id="login">
    Test
    <img src="login_bg.png">
</div>

und im CSS hab ich folgendes stehen:

div#login{

    -moz-box-shadow: 0px 5px 10px #bababa;
    -webkit-box-shadow: 0px 5px 10px   #bababa;
    box-shadow: 0px 5px 10px  #bababa;

Soweit so gut, aber was mir ausgegeben wird ist:

Wie man sieht, liegt der Schatten nicht an, sondern hat links und rechts und unten einen Abstand um Bild. Meine Frage ist: Wie kann ich den Abstand da wegbekommen, sodass der Schatten DIREKT an dem Bild anliegt (und ja, das Bild ist auf den Pixel genau ausgeschnitten, da ist kein Rand in der PNG Datei)?

 

[Nose]

img border auf 0 setzen dürfte helfen. je nachdem was du vorhast ists auch ne überlegung wert das bild als hintergrund vom div zu setzen, aber das ist ja wieder ne ganz andere sache....

 

[Tumbleweed]

Leg doch den drop shadow auf das image, nicht aufs div. Ist ja klar, wenn da noch Text mit drin steht, dass da ein Abstand entsteht.

 

[Escapado]

Edit: Okay, funktioniert doch.. mieser Tippfehler. Hab die Version von Tumbleweed genommen. Klappt 1a! Vieeelen Dank euch beiden!

 

[Tumbleweed]

Mach mal das "div"-Wörtchen weg, denn #login ist ja nun kein div mehr. Das könnte schon reichen. Ansonsten, wenn du dir das div beibehalten willst, was vorher da war, dann kannst du das Bild darin auch erreichen per selector

#login img
{
   ...
}

 

[Nose]

achja, ne andere variane wär, wenn du eh schon nen png hast, den schatten einfach in die grafik einzubauen.

 

[Omega4]

Setze am besten mal für die div und images die Eigenschaften margin und padding auf 0.

 

[Daaron]

achja, ne andere variane wär, wenn du eh schon nen png hast, den schatten einfach in die grafik einzubauen.

Kann man machen, kostet aber Bandbreite. Der Trick an CSS3 ist ja, dass man viele Funktionen, die man früher mit JavaScripts oder halbtransparenten PNGs erledigte jetzt mit 2-3 Zeilen CSS erzielen kann.