firefox table wrapping problem

Discussion in 'HTML' started by CRON, Jul 24, 2006.

  1. CRON

    CRON Guest

    Hi anyone come across something like this before:
    http://www.scouttalk.ie/unit.php?orgID=3

    look at the member list at the bottom of the page. In IE these images
    wrap beautifully to the next line but in firefox they overlap eachother
    to fit in the cell.

    I have each image inside a table with style: float:left. This wraps
    the tables so that they appear side by side. I cant figure out the
    problem. I've tried word-wrap:break-word and overflow:auto on the
    parent cell but they have no effect.

    I know you think I should have take the pics out of the tables but I
    need them in there because when you sign into the site, it shows user
    names beneath each image ;c)

    Any help would be a dream!
    Ciaran
    CRON, Jul 24, 2006
    #1
    1. Advertising

  2. CRON

    CRON Guest

    CRON, Jul 24, 2006
    #2
    1. Advertising

  3. CRON

    jojo Guest

    CRON wrote:
    > Hi anyone come across something like this before:
    > http://www.scouttalk.ie/unit.php?orgID=3
    >
    > look at the member list at the bottom of the page. In IE these images
    > wrap beautifully to the next line but in firefox they overlap eachother
    > to fit in the cell.


    And they need two lines in IE but try to fit in one in FF. Perhaps thats
    the problem? Try to specify a width for the tables so FF has to break
    them into a second line. Can use min-width here, it's ignored in IE so
    it shouldn't cause new problems.

    > I have each image inside a table with style: float:left. This wraps
    > the tables so that they appear side by side. I cant figure out the
    > problem. I've tried word-wrap:break-word


    Not a good idea to use a IE-only property to fix a problem in FF... ;-)

    > and overflow:auto on the parent cell but they have no effect.


    Can use overflow:hidden on the cells, the images shouldn't overlap then,
    but they aren't shown completely anymore.

    <snip>

    HTH, jojo
    jojo, Jul 24, 2006
    #3
  4. CRON

    CRON Guest

    jojo wrote:
    > CRON wrote:
    > > Hi anyone come across something like this before:
    > > http://www.scouttalk.ie/unit.php?orgID=3
    > >
    > > look at the member list at the bottom of the page. In IE these images
    > > wrap beautifully to the next line but in firefox they overlap eachother
    > > to fit in the cell.

    >
    > And they need two lines in IE but try to fit in one in FF. Perhaps thats
    > the problem? Try to specify a width for the tables so FF has to break
    > them into a second line. Can use min-width here, it's ignored in IE so
    > it shouldn't cause new problems.


    Yeah the idea is that the pics wrap to the next line at the moment its
    2 but it could be 3 or more in future.
    I tried specifying the tables width but got nothing.

    >
    > > I have each image inside a table with style: float:left. This wraps
    > > the tables so that they appear side by side. I cant figure out the
    > > problem. I've tried word-wrap:break-word

    >
    > Not a good idea to use a IE-only property to fix a problem in FF... ;-)
    >


    I was really just trying anything I could think of - didnt realise!

    > > and overflow:auto on the parent cell but they have no effect.

    >
    > Can use overflow:hidden on the cells, the images shouldn't overlap then,
    > but they aren't shown completely anymore.


    Yeah overflow:hidden hides the pics behind the next cell which is
    strange because no other overflow functions have any effect.

    >
    > <snip>
    >
    > HTH, jojo


    Thanks for the reply I appreciate your help a lot
    Ciaran
    CRON, Jul 24, 2006
    #4
  5. CRON

    jojo Guest

    CRON wrote:

    <snip>
    >>> and overflow:auto on the parent cell but they have no effect.

    >> Can use overflow:hidden on the cells, the images shouldn't overlap then,
    >> but they aren't shown completely anymore.

    >
    > Yeah overflow:hidden hides the pics behind the next cell which is
    > strange because no other overflow functions have any effect.
    >


    Visible: just the thing you do not want... and default with everything
    but the body, textareas, inputs and frames, so it cannot change anything

    Auto: let the browser decide => it uses the default value => visible

    But scroll should have an effect, shouldn't it?
    jojo, Jul 24, 2006
    #5
  6. CRON

    Andy Mabbett Guest

    Andy Mabbett, Jul 24, 2006
    #6
  7. On 2006-07-24, CRON wrote:
    > Hi anyone come across something like this before:
    > http://www.scouttalk.ie/unit.php?orgID=3
    >
    > look at the member list at the bottom of the page. In IE these images
    > wrap beautifully to the next line but in firefox they overlap eachother
    > to fit in the cell.
    >
    > I have each image inside a table with style: float:left. This wraps
    > the tables so that they appear side by side. I cant figure out the
    > problem. I've tried word-wrap:break-word and overflow:auto on the
    > parent cell but they have no effect.
    >
    > I know you think I should have take the pics out of the tables but I
    > need them in there because when you sign into the site, it shows user
    > names beneath each image ;c)


    I put each image in a separate table, and used "display:inline"
    for this page:
    <http://torquiz.freeshell.org/current/qa-04.04.shtml>.

    It works in IE and FF, but not Konqueror and Opera. They continue
    to use display:block.

    --
    Chris F.A. Johnson <http://cfaj.freeshell.org>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
    Chris F.A. Johnson, Jul 24, 2006
    #7
  8. CRON

    CRON Guest

    > But scroll should have an effect, shouldn't it?

    Aye I thought it should but for some reason it doesnt. Perhaps there is
    a better way to lay it out but I can't think of anything but tables as
    a way to display images and corresponding pics lik that across the
    page. It's so frustrating when it works in one browser but not in
    another!
    CRON, Jul 24, 2006
    #8
  9. CRON

    CRON Guest


    > I put each image in a separate table, and used "display:inline"
    > for this page:
    > <http://torquiz.freeshell.org/current/qa-04.04.shtml>.
    >
    > It works in IE and FF, but not Konqueror and Opera. They continue
    > to use display:block.
    >


    Brilliant! Thanks a million Chris! I really appreciate you stopping by!
    ;c)
    Cheers to you too jojo!
    To Andy Mabbett I say this:

    Failed validation, 14 errors .
    http://validator.w3.org/check?uri=h...etect automatically)&doctype=Inline&verbose=1

    Cheers,
    Ciaran
    CRON, Jul 24, 2006
    #9
  10. CRON

    Jim Moe Guest

    CRON wrote:
    > http://www.scouttalk.ie/unit.php?orgID=3
    >
    > look at the member list at the bottom of the page. In IE these images
    > wrap beautifully to the next line but in firefox they overlap eachother
    > to fit in the cell.
    >

    Sheesh! What a massive misuse of tables.
    Useful tip: If there is a difference in layout between IE and other
    browsers, IE is incorrect. This is true for almost all cases.

    <img>s are inline elements. They follow similar rules as text. Get rid
    of all the table markup, put the images altogether and they will wrap
    naturally.
    For the images with captions see
    <http://www.spartanicus.utvinternet.ie/centered_image_gallery_with_captions.htm>.

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
    Jim Moe, Jul 24, 2006
    #10
  11. CRON

    Andy Mabbett Guest

    In message <>, CRON
    <> writes
    >To Andy Mabbett I say this:
    >
    >Failed validation, 14 errors .
    >http://validator.w3.org/check?uri=http://groups.google.ie/group
    >%2Falt.html%2Fbrowse_frm%2Fthread%2Fb012b2b13182e4b0%2Fa2e24fe23b049ca2
    >%3F&charset=%28detect+automatically%29&doctype=Inline&verbose=1


    Yes. So?
    --
    Andy Mabbett
    Say "NO!" to compulsory ID Cards: <http://www.no2id.net/>

    Free Our Data: <http://www.freeourdata.org.uk>
    Andy Mabbett, Jul 24, 2006
    #11
  12. CRON

    CRON Guest

    > <img>s are inline elements. They follow similar rules as text. Get rid
    > of all the table markup, put the images altogether and they will wrap
    > naturally.
    > For the images with captions see
    > <http://www.spartanicus.utvinternet.ie/centered_image_gallery_with_captions.htm>.


    This is cool - never seen it before. Thanks for the tip. I just go with
    whatever works and tables were all I could think of. I'm sorry if I
    offended you! ;c)
    CRON, Jul 25, 2006
    #12
  13. CRON

    Jim Moe Guest

    CRON wrote:
    >> For the images with captions see
    >> <http://www.spartanicus.utvinternet.ie/centered_image_gallery_with_captions.htm>.

    >
    > This is cool - never seen it before. Thanks for the tip. I just go with
    > whatever works and tables were all I could think of.
    >

    "If the only tool you have is a hammer, everything looks like a nail."

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
    Jim Moe, Jul 25, 2006
    #13
    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. David Williams
    Replies:
    2
    Views:
    1,096
    Jacob Yang [MSFT]
    Aug 12, 2003
  2. =?Utf-8?B?RGF2aWQgQ29l?=

    Wrapping Columns in a Table

    =?Utf-8?B?RGF2aWQgQ29l?=, Feb 2, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    342
    =?Utf-8?B?VGltIFN0YWxs?=
    Feb 2, 2004
  3. Ryan Stewart
    Replies:
    1
    Views:
    6,489
    Robert Frost-Bridges
    Nov 25, 2003
  4. Paula Radetzky
    Replies:
    12
    Views:
    678
    =?ISO-8859-1?Q?G=E9rard_Talbot?=
    Feb 20, 2006
  5. JA
    Replies:
    2
    Views:
    585
    Wÿrm
    Jun 12, 2006
Loading...

Share This Page