text at the bottom of span

Question

I have something like this

<td>
    <a href="#">
        <span class="foo">
             Link Text
        </span>
    </a>
</td>

and I have

.foo
{
    height: 90px;
    display: inline-block;
    background: #e8edff url('foo.png') top center no-repeat;
    vertical-align: bottom;
}

and it renders something like this (with the background image)

 ________________
|    Link Text   |
|                |
|                |
|                |
|                |
|________________|

How can i make it so I renders like this?

 ________________
|                |
|                |
|                |
|                |
|    Link Text   |
|________________|

The requirement is the every cell has to have a hyperlink and a background image and some text at the bottom.

Thanks

EDIT: here's a jsfiddle link of what I'm trying to do.

Answer 1

give vertical-align: bottom; in TD instead of span

EDIT: write like this

.foo
{
    height: 50px;
    background: #e8edff url('http://www.emblemmart.com/emblems-badges-insignias/media/logos/medium/BMW.gif') top center no-repeat;
    display:table-cell;
    vertical-align:bottom;

}

check this http://jsfiddle.net/sandeep/yBKZS/1/

Answer 2

Put the vertical-align: bottom; on the TD not the SPAN.

vertical-align will not do what you want, except in two cases: On a table element, or on (or near) an image. See: http://phrogz.net/css/vertical-align/index.html

Answer 3

add this to the td tag <td valign="bottom">

UPDATE

Here's what you are looking for:

http://jsfiddle.net/yBKZS/3/

UPDATE 2

If you don't need the image to be background you could do something like this:

http://jsfiddle.net/yBKZS/8/