Problems spacing image list inside a table cell

[matthewamzn]

I'm trying to make a grid of images inside a table cell. The problem is I can't get it to space properly. There's always a blank space to the left of the image list.

Style:

table.gallery {
background-color: #990000;
border-width: 0px;
width: 300px;
}
table.gallery td {
border-width: 0px;
padding: 0px;
background-color: #e7f1d7;
text-align:center;
}
.gallery ul {
list-style-type:none;
} 
.gallery li { 
float:left; 
margin:0px; 
}
.gallery a:link img {
border:none;
width:50px;
height:40px;
}

Code:

<table class="gallery">
 <tr>
 <td>
 <ul class="gallery">
 <li><a href="" title="Title"><img src="image.jpg" /></a></li>
<li><a href="" title="Title"><img src="image.jpg" /></a></li>
<li><a href="" title="Title"><img src="image.jpg" /></a></li>
<li><a href="" title="Title"><img src="image.jpg" /></a></li>
<li><a href="" title="Title"><img src="image.jpg" /></a></li>
<li><a href="" title="Title"><img src="image.jpg" /></a></li>
<li><a href="" title="Title"><img src="image.jpg" /></a></li>
<li><a href="" title="Title"><img src="image.jpg" /></a></li>
<li><a href="" title="Title"><img src="image.jpg" /></a></li>
<li><a href="" title="Title"><img src="image.jpg" /></a></li>
<li><a href="" title="Title"><img src="image.jpg" /></a></li>
<li><a href="" title="Title"><img src="image.jpg" /></a></li>
<li><a href="" title="Title"><img src="image.jpg" /></a></li>
<li><a href="" title="Title"><img src="image.jpg" /></a></li>
<li><a href="" title="Title"><img src="image.jpg" /></a></li>
<li><a href="" title="Title"><img src="image.jpg" /></a></li>
<li><a href="" title="Title"><img src="image.jpg" /></a></li>
<li><a href="" title="Title"><img src="image.jpg" /></a></li>
<li><a href="" title="Title"><img src="image.jpg" /></a></li>
<li><a href="" title="Title"><img src="image.jpg" /></a></li> 
</ul></td>
 </tr>
 <tr><td>
 some text
 </td></tr>
</table>

[alexdunae]

Try stripping the margin and padding from both the UL and LI tags.

NB: if you ever want to add margin back on to your image tags you'll want to declare

img { display: block; ..... }

[matthewamzn]

Thanks, that fixed the width spacing. I have a small gap between each row of images. Where do I remove that?

table.gallery {
background-color: #990000;
border-width: 0px;
width: 300px;
}
table.gallery td {
border-width: 0px;
padding: 0px;
background-color: #e7f1d7;
text-align:center;
}
.gallery ul {
list-style-type:none;
margin:0;
padding:0;
} 
.gallery li { 
float: left; 
margin:0;
padding:0; 
}
.gallery a:link img {
border:none;
width:50px;
height:40px;
}

[alexdunae]

I would guess that it's the padding within your table cells. If you want these really snug, try adding

table.gallery { 
 border-collapse: collapse; 
} 
.gallery * { margin: 0; padding: 0; } 

[matthewamzn]

I removed the spaces between <li> tags in my code. This removed the row gaps in IE, but firefox still shows them.

<table class="gallery">
 <tr>
 <td>
 <ul class="gallery"><li><a href=""><img src="image.jpg" /></a></li><li><a href=""><img src="image.jpg" /></a></li><li><a href=""><img src="image.jpg" /></a></li><li><a href=""><img src="image.jpg" /></a></li><li><a href=""><img src="image.jpg" /></a></li><li><a href=""><img src="image.jpg" /></a></li><li><a href=""><img src="image.jpg" /></a></li><li><a href=""><img src="image.jpg" /></a></li><li><a href=""><img src="image.jpg" /></a></li><li><a href=""><img src="image.jpg" /></a></li><li><a href=""><img src="image.jpg" /></a></li><li><a href=""><img src="image.jpg" /></a></li><li><a href=""><img src="image.jpg" /></a></li><li><a href=""><img src="image.jpg" /></a></li><li><a href=""><img src="image.jpg" /></a></li><li><a href=""><img src="image.jpg" /></a></li><li><a href=""><img src="image.jpg" /></a></li><li><a href=""><img src="image.jpg" /></a></li><li><a href=""><img src="image.jpg" /></a></li><li><a href=""><img src="image.jpg" /></a></li></ul></td>
 </tr>
 <tr><td>Some Text</td></tr>
</table>