Text offset command in CSS

Heey guys,

I have another question for you.

I have this very nice table for my nav menu, its build entirely on CSS including the rollover effect.

My question is this:

I’d like to offset the text in the table for about 20px, where and how in the CSS file do i do this?

the reason for this is that my background image has a small picture in the beginning of the image. here is teh CSS code:

CSS stylesheet

/* Ok, not so pretty so now we specify styles for these. For the table (.menu) we specify the following: */
table.menu a {
padding: 2px;
display: block;

/* The outer div "div.menu a" is where we specify our base styles and it also acts as a workaround for crappy NS4x which does not like borders on links. Told you we need it! */
div.menu a {
font-family: verdana, sans-serif;
padding: 2px;

/* We then specify the link colours including the hover styles which creates our highlight effect: */
div.menu a:link {

div.menu a:active {

div.menu a:visited {

div.menu a:hover {
/* IE can be a little slow changing styles on links so we have to specify the following for the outer div: */
div.menu {

Thanks Sebastiaan

In this style rule (div.menu a) you’ll want to add text-indent: 20px; to your code.

And based on what I’m seeing, you’re using DIVs for something an unordered list would be better capable of doing.

Thanks :slight_smile:

The problem with UL (atleast the problem that i have. Is that i cant set the text to be in the middle of the image that im using.)

Or is this done with margins?

When using a list, you have to kill the margins and padding on everything (I like to do this via the universal selector - so I can remove them from everything else as well). Then you can set the background images on the links like you were before.

Setting the line-height to be the same as the image height will achieve this.