css image swap

I'm trying to duplicate a particular image swap effect shown here:
http://css.maxdesign.com.au/listamatic/horizontal18.htm

However, I'm confused as to how the padding values are calculated and I was
hoping someone could provide a little insight. Are the padding values
contingent upon the length and size of the text? Is there a way to achieve
this effect w/out using padding values? I attempted to set display: block
on the a elements, but that caused the list items to stack on top of each
other, despite the fact that their display style is set to inline.

TIA~
PJ

PJ wrote:

I'm trying to duplicate a particular image swap effect shown here:
http://css.maxdesign.com.au/listamatic/horizontal18.htm

However, I'm confused as to how the padding values are calculated

Distance between edge of the image and the area of the image that the text
should appear in.

I attempted to set display: block on the a elements, but that caused the
list items to stack on top of each other, despite the fact that their
display style is set to inline.

Of course - a block has a new line before and after it. It busts the line.


--
David Dorward <http://dorward.me.uk/>

However, I'm confused as to how the padding values are calculated

Distance between edge of the image and the area of the image that the text
should appear in.

If this is the case, then how do I get one style to work for text of varying
lengths?

PJ wrote:

However, I'm confused as to how the padding values are calculated

Distance between edge of the image and the area of the image that the
text should appear in.

If this is the case, then how do I get one style to work for text of
varying lengths?

The padding isn't related to the size of the text, the size contraints are
provided by the image. If you want to work around that, then you have to
roll into the land of nested divs -
http://dorward.me.uk/tmp/StarSlayer/background.htm (and it might be ...
tricky to persuade that to work with the rollovers.)

--
David Dorward <http://dorward.me.uk/>