Image Thumbnail View: Thumbnail borders

[dmwhipp]

1) Script Title: Image Thumbnail Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

3) Describe problem: I have been able to control the large images with css, but am having problems with the thumbnails.

Here's the page I have the script on:
http://www.thegenesisgroup2000.com/portfolio.html

There is a 2 pixel border on the left and right and 2 pixels on top and 4 pixels at the bottom.

I tried using css, but it's still off center and has the border:
.port { border-bottom:0; margin-top:0px; margin-bottom;0px; }

Thanks in advance.
Deborah

[jscheuer1]

Nesting tables like that makes the page take longer to load. Your page looks different in different browsers. I couldn't find one that made it look as you describe it (I only checked in 5). FF 2 came closest.

Anyways, in IE 7 it looked best with each group of thumbs in a horizontal line, but in all others I checked they are each in two columns, I'm not sure yet why this is, but if each td they are in is given the style - say, via a class name:


.port_tds {
white-space:nowrap;
padding:2px 6px;
}

It should work out (for horizontal lines), then for the images themselves:


.port {
border:none;
padding:2px 4px;
vertical-align:middle;
}

That will get rid of the borders, space them out evenly, and center them vertically in the cells. Of course, this is just what looked good to me in the FF developer extension, your taste and results may vary.

[dmwhipp]

Thanks!