CSS: width of a <a>

Question

I'm trying to do something pretty simple: an <a> tag with a background image. The code is found here, http://jsfiddle.net/QWatA/

The problem is that for some reason I can't set the width of the <a> tag in this code. If I had just a normal background and set it with a width it works fine. However seems like if I do it this way I have no control over the width. Ideally I want all the links to have highlights of the same width.

The reason I'm doing this is that I want a different background image for each of the links, so I'm forced to define all those a.class1, a.class2 stuff.

Thanks!!

Answer 1

Add display:inline-block; to your 'a' elements. By default 'a' is display:inline and so does not establish box with width/height.

http://jsfiddle.net/QWatA/1/