Question

In application I have a few columns that can contain inline-editable values. For these cells, I want to display a pencil icon:

td.editable
{
    padding-right: 20px;
    background-image: url(pencil.png);
    background-repeat: no-repeat;
    background-position: center right;
}

This CSS is almost fine except… I would like to have a 2px space between cells border and image. Is is possible to achieve it with background image and CSS? If not, how can I achieve it?

Thanks

Answer 1

Just re-save your BG image with a 2px transparent border and make the inputs 4px taller to accomodate the new height.