Ever increasing table width.

[Zeb]

I've thrown together a basic javascript-driven gallery for a friend. It
uses onclick to show and hide table columns and to update the src of an
image. As you'll see by following the link below, the first column
holds a set of Gallery thumbnails, the second column holds a set of
Image thumbails and the third column holds the actual image.

http://www.zebrakorn.net/Gallery

Works great in IE, but Netscape and Firefox on Max OS are experiencing
a strange problem.

You'll see that gallery 3 has a lot more thumbnails, and I've achieved
the scrolling with a div tag that has overflow: auto and a set height.
Works great, but if you're using NS and you click on Gallery 3, a
mysterious gap appears between the second and third columns.

Continue to click on Gallery 2, Gallery 3, Gallery 2, Gallery 3 etc and
that gap will grow ever wider.

I'm assuming it's related to the scrollbar that appears. It's as though
it wides the table to accomodate the bar, but then does not decrease
the width when there is no bar. Most frustrating!

If needs be, I'll have to add prev / next links to the first and second
columns, but I'd rather not.

If anyone could shed some light on this I'd be most thankful.


Regards,

Matt

 

[Jonathan N. Little]

I've thrown together a basic javascript-driven gallery for a friend. It
uses onclick to show and hide table columns and to update the src of an
image. As you'll see by following the link below, the first column
holds a set of Gallery thumbnails, the second column holds a set of
Image thumbails and the third column holds the actual image.

http://www.zebrakorn.net/Gallery

Works great in IE, but Netscape and Firefox on Max OS are experiencing
a strange problem.

You'll see that gallery 3 has a lot more thumbnails, and I've achieved
the scrolling with a div tag that has overflow: auto and a set height.
Works great, but if you're using NS and you click on Gallery 3, a
mysterious gap appears between the second and third columns.

Continue to click on Gallery 2, Gallery 3, Gallery 2, Gallery 3 etc and
that gap will grow ever wider.

I'm assuming it's related to the scrollbar that appears. It's as though
it wides the table to accomodate the bar, but then does not decrease
the width when there is no bar. Most frustrating!

If needs be, I'll have to add prev / next links to the first and second
columns, but I'd rather not.

If anyone could shed some light on this I'd be most thankful.

A tip, when things work oddly look for a error.


table cell "Gallery03" contains a DIV which has an invalid closing tag

"</div"

Rather than display and hide table cells "Gallery01"-"Gallery03" where
the browser has to recalculate the number of columns (I know the end
result stays static but your script does initialize by removing them
all) and put the three gallery DIVs within the 2nd TD and make them
"Gallery01"-"Gallery03". Better yet dump the table all together and have
3 separate DIVs with your lists of thumbs, float them left and if
viewport not wide enough instead of scrolling horizontally to see the
full-size image it will slip under the thumbnail selectors.

 

[Zeb]

Hi Jonathan

Thanks for the reply. I've corrected the (very silly) typo and it's
made no difference. Thanks for pointing it out though!

I like the sound of putting the three divs into a single table cell -
would certainly make things more simple and might cut down on table
layout problems. I'll give this a go and see what happens.

I'm less enthused by just using divs and no tables. I know it's the
correct way to do things - I'm just not quite as adept with div layouts
- and I know browsers tend to be less happy with them unless they're
done properly.

 

[Zeb]

Thanks for the tip Jon. I went with three divs in a table cell and it
works fine now. I don't know why I didn't do it this way in the first
place!

 

[Jonathan N. Little]

Thanks for the tip Jon. I went with three divs in a table cell and it
works fine now. I don't know why I didn't do it this way in the first
place!

Sometime when you are deep in a project you can get a little myopic. It
is normal.