Question

I need to make following code stretchable with predefined height

<style>
.title{
   background: url(bg.gif) no-repeat bottom right;
   height: 25px;
}
</style>

<span class="title">This is title</span>

But since span is inline element, "height" property won’t work.

I tried using div instead, but it will expand up to the width of upper element. And the width should be flexible.

What’s a good solution for this?

Answer 1

Give it a display:inline-block in CSS – that should let it do what you want.
In terms of compatibility: IE6/7 will work with this, as quirks mode suggests:

IE 6/7 accepts the value only on elements with a natural display: inline.