Question

When tab will select, the arrow image will appear before the tab text. But its appearing just at the left hand top corner.

Its looking like :

>

    abc

I want like:

>abc

The css is given below:

#navigation .selected a { background: url(../images/custom/arrow.png) no-repeat scroll 0 0; }

I’ve tried like :

#navigation .selected a {
vertical-align: middle;

background: url(../images/custom/arrow.png) no-repeat scroll 0 0; 
}

but its not working 🙁

Answer 1

You can influence the alignment of the background image using the 2 last parameters:

   #navigation .selected a {
      background: url(../images/custom/arrow.png) no-repeat scroll left center; 
     }

Depending on the other css present left bottom may get better results, or exact px-alignment may be needed.

If you have any further problems aligning the background properly, an url where the problem occurs would be of help.