Ever increasing table width.

Discussion in 'HTML' started by Zeb, Sep 14, 2006.

  1. Zeb

    Zeb Guest

    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
    Zeb, Sep 14, 2006
    #1
    1. Advertising

  2. Zeb wrote:
    > 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.


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Sep 14, 2006
    #2
    1. Advertising

  3. Zeb

    Zeb Guest

    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.

    Jonathan N. Little wrote:
    > Zeb wrote:
    > > 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.
    >
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIO
    > http://www.LittleWorksStudio.com
    Zeb, Sep 14, 2006
    #3
  4. Zeb

    Zeb Guest

    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 wrote:
    > Zeb wrote:
    > > 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.
    >
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIO
    > http://www.LittleWorksStudio.com
    Zeb, Sep 16, 2006
    #4
  5. Zeb wrote:
    > 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.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Sep 16, 2006
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. AndrewF
    Replies:
    1
    Views:
    772
    Bruce Barker
    Oct 10, 2005
  2. Sean Jorden
    Replies:
    1
    Views:
    594
    laurie
    Aug 19, 2003
  3. kris
    Replies:
    11
    Views:
    873
  4. Jason
    Replies:
    0
    Views:
    197
    Jason
    Jul 6, 2004
  5. Mr. Land
    Replies:
    5
    Views:
    116
    Thomas 'PointedEars' Lahn
    Mar 3, 2008
Loading...

Share This Page