Horizontal row of image with no space in between images

[webmaster1]

Simply put, I have a row of six images, each of different width in one horizontal row that I want to fit snugly together without any space in between.

 

If I wanted to this using a table it would roughly look like this:

 

<table>
   <tr>
      <td><img src="image1.jpg"></td>
      <td><img src="image2.jpg"></td>
      <td><img src="image3.jpg"></td>
      <td><img src="image4.jpg"></td>
      <td><img src="image5.jpg"></td>
      <td><img src="image6.jpg"></td>
   </tr>
</table>

 

I've tried using spans and an unordered list though I end with an undesirable space in between each image that I account for.

 

Here's the html of the list approach:

 

<div id="nav-two">
            	<ul>
                <li><img src="images/image1.png"></li>
                <li><img src="images/image2.png"></li>
                <li><img src="images/image3.png"></li>
                <li><img src="images/image4.png"></li>
                <li><img src="images/image5.png"></li>
                <li><img src="images/image6.png"></li>
                </ul>
</div><!-- nav-two -->

 

And the css:

 

#nav-two{
background-image:url(images/bg-two.png);
width:900px; height:130px;
}

#nav-two ul{
list-style-type:none;
margin:0px;
padding:0px;
white-space:nowrap;
}

#nav-two li{
display:inline;
}

 

[webmaster1]

Apologies for the various typos. I can no longer edit my original post.

[haku]

Is the list really necessary? Is it a bunch of pictures, or is it actually a listing of some sort?

 

If it's actually a list, and they need to be in the list tags, you can use this:

 

li
{
  float:left;
  margin:0;
  padding:0;
}

 

The, whether its a list or not, you also use this:

 

img
{
  margin:0;
}

[webmaster1]

The float done the trick , haku but to answer your question I'm not sure if it needs to be a list.

 

I have six images. The first is my logo. The last five are button images that have will have a mouse-over image swap.

 

[*]Should I not be using a list?

[*]Do I need to use clear after using the left float so the rest of my layout won't be affected?

 

[webmaster1]

I've just noticed in IE6 that the left float does affect a subsequent paragraph. It appears to be floating left.

[webmaster1]

I've fixed it. I took Haku's advise into consideration and decided to rebuild the layout with use of a list:

 

<div>

  <img src="images/image1.png">

  <img src="images/image2.png">

  <img src="images/image3.png">

  <img src="images/image4.png">

  <img src="images/image5.png">

  <img src="images/image6.png">

</div>

 

No floats or no CSS for the matter. I was still expieriencing a cross-browser image whereby there was an unwanted space between the images. Setting margin and padding to zero had no effect. Instead, I tried this:

 

<div>

  <img src="images/image1.png"><img src="images/image2.png"><img src="images/image3.png">img src="images/image4.png"><img src="images/image5.png"><img src="images/image6.png">

</div>

 

I basically removed the spaces between the html elements and this done the trick. I've obviously had to do this in the past but simply forgot the workaround.

 

In conclusion, Haku was correct to inquire if I even needed the list, I didn't. Furthermore the problem was resolved without any CSS at all. It was a HTML issue.

 

* head explodes

 

 

 

[webmaster1]

Lots of typos again but I can't modify.