The problem Imagine you have a span that contains some text, which you want to replace by an image. For instance, the page navigation bar of the datatable looks like: Imagine you want to replace the "< prev" by an image. The text is inside a span with the class yui-pg-previous: <span class="yui-pg-previous">< prev</span>
The solution Using the following CSS, you can "replace" the text by an image: .yui-skin-sam .yui-pg-previous {
background-image: url('../../apps/fr/style/images/silk/resultset_first.png');
background-repeat: no-repeat;
width: 16px; height: 16px;
overflow: hidden;
line-height: 4em;
}
.yui-dt-paginator span { vertical-align: middle }
- The CSS uses a background image. Change the path in the above CSS as appropriate in your situation.
- The text is pushed away by using a large value of
line-height. By itself, this would just make box that contains the text higher, without hiding the text. The overflow: hidden "crops" the box and leaves the text out. - So the image is aligned the text make sure that everything has a
vertical-align: middle. In this particular case, all the components of the navigation bar are in span elements inside a div with class yui-dt-paginator, so .yui-dt-paginator span { vertical-align: middle } does the trick.
This give: | 
