Hey, I would like to create a tab/erollover effect using css on some links. The problem is I am not sure how to get the whole of my image displayed in the background of the link.

So for example if my image is 100px wide, but my text only 40px wide only 40px of my background are displayed. How can I solve this?

- use a smaller image or
- specify a width >= 100px for your text?

Can you specify a width for text that easily, or does it need to be in a div or something?

a {
display: block;
width: 100px;
}
That's all you need. Maybe text-align: center to make it look pretty too.

Your issue will be if people resize your link beyond the size of your background, so make sure it tiles well both horizontally and vertically (although if it's 40 px, it's most likely not going to happen.)

You might want to have a look at these:
http://www.alvit.de/css-showcase/css...s-showcase.php

ok I have set up the following set of links with the following css code - however rather than displaying in a nice line they are stacked horizontally... how can I stop this and have them displayed vertically one next to the other?

HTML LINKS:

PHP Code:

<table border="0" cellpadding="0" cellspacing="0" id="header">
  <tr>
    <td id="logo">
      <?php if ($logo) { ?><a href="<?php print $base_path ?>" title="<?php print t('Home') ?>"><img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" /></a><?php } ?>
      <?php if ($site_name) { ?><h1 class='site-name'><a href="<?php print $base_path ?>" title="<?php print t('Home') ?>"><?php print $site_name ?></a></h1><?php } ?>
      <?php if ($site_slogan) { ?><div class='site-slogan'><?php print $site_slogan ?></div><?php } ?>
    </td>
    <td id="menu">
      <div id="primary">
      
      <a href="http://allcdreviews.com/">Home</a>
      <a href="http://allcdreviews.com/node/58">Browse Reviews</a>
      <a href="http://allcdreviews.com/popular_reviews">Popular</a>
      <a href="http://allcdreviews.com/node/add/content_review">Submit</a>
      <a href="http://allcdreviews.com/contact">Contact Us</a>
      
      </div>
    </td>
  </tr>
  <tr>
    <td colspan="2"><div><?php print $header ?></div></td>
  </tr>
</table>

CSS:

PHP Code:

#header {
  background: #C0C0C0 url(http://www.allcdreviews.com/themes/bluemarine/headerbg.gif) repeat-x;
}
#logo {
  vertical-align: middle;
  border: 0;
}
#logo img {
  float: left;
  padding: 0em 0em 0em 0em;
  border: 0;
}

#menu {
  text-align: right;
  vertical-align: bottom;
}
#primary {
  font-size: 1.2em;
  color: #f5f5f5;
}
#primary a {
    display: block;
    width: 154px;
    height:47px;
    background: url(http://www.allcdreviews.com/themes/bluemarine/home.gif) 0 0 no-repeat;
    text-align: center;
    font-size: 12pt;
    color: #FFFFFF;
    text-indent: -9999px;

    
}
#primary a:hover {
    display: block;
    width: 154px;
    height:47px;
    background: url(http://www.allcdreviews.com/themes/bluemarine/home2.gif) 0 0 no-repeat;
    text-align: center;
    font-size: 12pt;
    color: #FFFFFF;
    text-indent: -9999px;

} 


I think you've got your directions mixed up. If you want them in a HORIZONTAL line, like this:

link.. link... link... link...

then you're going to have to use a colspan to be sure the cell goes all the way across. You might have to string the <a href="lxxxx">links one after the other. If you used an undordered list instead of links in a table cell, all you have to tell it is "display: inline".

What you're getting the links stacking VERTICALLY like this:
link
link
link
link

EEWWWW!!! Don't USE Tables. Too Much code. It drastically changes your code to content ratio if you use divs, td, dd, ul, li. Try those instead. It helps you build a much cleaner site.