Question

I have a div which I have a plus icon to expand the view. When the user hovers overs the icon moves to the green version.

I am now adding a extra line of text but now the full icon gets shown. I am not sure how to set the height to only allow the fist part of the icon to be show.

<div class="span-5 roomtitle">
   <a href="#">Classic Double Room</a>
   <br>Sleeps: 2
</div>

css:

.roomtitle {
            background: url("../images/icons/icon_add.gif") no-repeat scroll 0 0 transparent;
            color: #990000;
            line-height: 14px;
            padding-left: 25px;
            }

Answer 1

Put the sprite in the link instead of the div:

.roomtitle { 
    color: #990000; 
    line-height: 14px; 
}
.roomtitle > a {
    display: inline-block;
    height: 14px;
    background: url("../images/icons/icon_add.gif") no-repeat scroll 0 0 transparent; 
    padding-left: 25px; 
}

Working demo: http://jsfiddle.net/gilly3/U285K/