<UL> with no gaps

Hi jsegura,
Can you just use the images without a container?
Post a link and we will be able to offer better advice.

I want to rebuild the index page for site: http://joellortiz.com. Instead fo using tables I would rather do with css.

Here is how I would approach this. Apply a class (i've chosen to call it "slice") to your <ul> tag which will then allow it to provide context for the tags nested within. Define your <li> as a block:

ul.slice li{
  display:block;
  position:relative;
  /* may need to put a float here depending on remainder
of your structural CSS */
  margin:0;
  border:0;
  padding:0;
  list-style:none;
}
ul.slice a {
  text-decoration:none;
}
ul.slice a img {
  display:block;
}
ul.slice span {
/*Hidden text for text only browsers*/
  height: 0;
  width: 0;
  overflow: hidden;
  position: absolute; /* for the benefit of IE5 Mac */
}

and then your index would be:

<ul class="slice">
  <li><a href="#" title=""><img src="..." alt="" /></a>
  <span>Link 1</span>
  </li>
  <li><a href="#" title=""><img src="..." alt="" /></a>
  <span>Link 2</span>
  </li>
  <li><a href="#" title=""><img src="..." alt="" /></a>
  <span>Link 3</span>
  </li>
</ul>

Notice the use of <span> text to provide altenative text-only links. This is important for accessability purposes.

Note: I haven't tried out this code, but I believe it 'should' work. I'd recommend creating a page with just the sliced index for debugging purposes.

There are further alternatives. You can use :hover properties to change the background of the <a> tags to provide mouseovers. Or you could have your images as backgrounds for the <a> tags and swap images on :hover. Anyhow - if you want to give a few things a try, I know you will get help here.

DE

I suspect that you just need to zero your margins and padding for each of your CSS elements (Tony will advise); however, using graphic images for your text may look cool BUT it takes a relatively long time to download; the text will never be seen by search engine spiders; the text size cannot be increased for those with poor eyesight; and the blind cannot use text readers unless you use 'alt' tags. I'm sure I will not be the only person to suggest that you try and make your text look cool by styling it with CSS.

Edit: posted at the same time as the post above.

roytheboy makes an important point regarding seach engines. The <span> text will provide something for the spider's to index upon whereas an image alone is no use. Remember to use the title attribute on your <a ...> tags to provide hover text for your links.

DE

DE's <span> suggestion is a very good one (that I had not thought of), but if you like a challenge and like doing 'the right thing', you'll still go for a text solution with creative use of CSS. Go on - you know it makes sense

Thanks guys for your valuable input. I'm going with text instead.

Yo - way t' go [clap] .

Let me know when you've finished and don't expect it to be easy because you need to remember that different users have different font sets available to them. You'll learn a lot as you go though. Good luck.