homepage Welcome to WebmasterWorld Guest from 54.196.201.253
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Problems spacing image list inside a table cell
matthewamzn




msg:3447538
 4:35 pm on Sep 11, 2007 (gmt 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>

 

alexdunae




msg:3447554
 4:49 pm on Sep 11, 2007 (gmt 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; ..... }

matthewamzn




msg:3447565
 5:02 pm on Sep 11, 2007 (gmt 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;

}

alexdunae




msg:3447572
 5:06 pm on Sep 11, 2007 (gmt 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; }


matthewamzn




msg:3447621
 5:37 pm on Sep 11, 2007 (gmt 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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved