Welcome to WebmasterWorld Guest from 54.163.35.238

Forum Moderators: not2easy

Message Too Old, No Replies

Problems spacing image list inside a table cell

     

matthewamzn

4:35 pm on Sep 11, 2007 (gmt 0)

10+ Year Member



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

4:49 pm on Sep 11, 2007 (gmt 0)

5+ Year Member



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

5:02 pm on Sep 11, 2007 (gmt 0)

10+ Year Member



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

5:06 pm on Sep 11, 2007 (gmt 0)

5+ Year Member



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

5:37 pm on Sep 11, 2007 (gmt 0)

10+ Year Member



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>
 

Featured Threads

Hot Threads This Week

Hot Threads This Month