The caption with a "tricky" vertical spacing.

Question

There is a picture:

How to make this inscription so that:

1. The lines were "separated" - that is between the lines was a gap.
2. Text aligned left.
3. The width of the photo is not fixed, it is floating.
4. The length of the text also not fixed (signatures can be of different lengths).

I need crossbrowser-compatible solution.

---

I apologize in advance for my English.

If you have a better title for this issue - I will change on your own.

Answer 1

Have you taken a look at this Text Blocks Over Image tutorial?

Answer 2

Try this: The trick - is usage of table (only one element, which support full functional vertical-align: bottom). To control gap use pairs of parameters (see .text font-size/line-height)

<style>
.frm{
    height:80px;
    vertical-align:bottom;
}
.text{
    margin-bottom:3px;
    background-color:#7f0000;
    color:white;
    font-size:15px;
    line-height:20px;
}
.banner{
    position:relative;
    left:0px;
    top:-80px;
    width:200px;
}
</style>
<div style="float:left;">
        <img src="64462657.jpg" />
<table class="banner" >
<tr>
    <td class="frm">
        <span class="text">OVERRIDE some long-long text there </span>
    </td>
</tr>
</table>

</div>

The only problem - you need specify average width of text (you requirement #3 is satisfied, but for text it could be changed).