Welcome to WebmasterWorld Guest from 54.162.136.26

Forum Moderators: not2easy

Message Too Old, No Replies

Problems spacing image list inside a table cell

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

Full Member

10+ Year Member

joined:Jan 27, 2005
posts:229
votes: 0


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>
4:49 pm on Sept 11, 2007 (gmt 0)

New User

5+ Year Member

joined:June 19, 2007
posts:27
votes: 0


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; ..... }
5:02 pm on Sept 11, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Jan 27, 2005
posts:229
votes: 0


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;

}

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

New User

5+ Year Member

joined:June 19, 2007
posts:27
votes: 0


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; }

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

Full Member

10+ Year Member

joined:Jan 27, 2005
posts:229
votes: 0


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>
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members