Apply image in bottom right corner

Question

I need to apply a small image, a little badge, (bottom right) over some thumbnails of a gallery. The code is generate automatically by a plugin and looks like this. I can't change the order of the tags but I can edit the two lines marked with * (i.e. adding a classes, changing from span to div) It works with top but not with bottom (top: 0px; right: 4px) don't know why.

<a href="/photos/fullpic.jpg">
<span>
*<span style="position: relative; display: block;">
     <img src="/photos/mythumbnail.jpg" alt="thumbnail">
    *<img src="/photos/plugins/badge.png" style="position: absolute; bottom: 0px; right: 4px;">
   </span>
</span>

edit: Forgot to add. Each thumbnail has different height/width so I can't declare an height for the container. It needs to stick bottom right regardless the dimension of the container.

Answer 1

It works fine for me but you have to remove display:block; for the <span>

What is the "wrapper" <span> ?

Answer 2

one problem is the display:block as @MatTheCat mentioned, the other is the whitespace and text that is inside the span..

you should either wrap the text inside a span/div along with the badge and set that to be positioned relative. for the white space you can set the font-size and line-height to 0.

example at http://jsfiddle.net/PEmEy/