Child TABLE, width:100%

Discussion in 'HTML' started by Oli Filth, Jun 11, 2005.

  1. Oli Filth

    Oli Filth Guest

    Hi,

    I know this is a common problem (I've been looking at Google results for
    an hour!!), but in this case I can't find a solution.

    Please have a look at this test page: http://olifilth.co.uk/01.html

    There are three DIVs (blue) with absolute positioning. The central DIV
    contains a TABLE (pink) with CSS styling of width: 100%.

    In Firefox, it does what one would expect, i.e. the central DIV falls
    between the ones on either side according to the CSS positioning, and
    the child TABLE expands to fill 100% of this DIV's width.

    However in IE (6), the central DIV flows off the right-hand side of the
    page, because IE decides to (incorrectly) use the viewport as its
    reference for TABLE percentage measurements.

    I've read various things saying that to fix this, one should wrap the
    TABLE in a <DIV width="100%"> or <DIV style="width: 100%">, however in
    this case, neither seems to solve it.

    Any ideas?


    --
    Oli
     
    Oli Filth, Jun 11, 2005
    #1
    1. Advertising

  2. Oli Filth

    Els Guest

    Oli Filth wrote:

    > Please have a look at this test page: http://olifilth.co.uk/01.html


    > In Firefox, it does what one would expect, i.e. the central DIV falls
    > between the ones on either side according to the CSS positioning, and
    > the child TABLE expands to fill 100% of this DIV's width.
    >
    > However in IE (6), the central DIV flows off the right-hand side of the
    > page, because IE decides to (incorrectly) use the viewport as its
    > reference for TABLE percentage measurements.


    > Any ideas?


    Don't use position:absolute for the middle container, but use margins
    instead:

    #listing
    {
    margin-left: 250px;
    margin-right: 250px;
    }

    tested in IE6, Opera8 and FF1.0.4.
    IE5.0 needs a width:100% on the div#listing.
    Can't have that in the other browsers though, so:

    #listing
    {
    margin-left: 250px;
    margin-right: 250px;
    width:100%;
    w\idth:auto; /* sets width back to auto for modern browsers */
    }



    --
    Els http://locusmeus.com/
    Sonhos vem. Sonhos vão. O resto é imperfeito.
    - Renato Russo -
    Now playing: The Rolling Stones - Emotional Rescue
     
    Els, Jun 11, 2005
    #2
    1. Advertising

  3. Oli Filth

    Oli Filth Guest

    Els said the following on 11/06/2005 20:52:
    > Oli Filth wrote:
    >
    >
    >>Please have a look at this test page: http://olifilth.co.uk/01.html

    >
    >
    >>In Firefox, it does what one would expect, i.e. the central DIV falls
    >>between the ones on either side according to the CSS positioning, and
    >>the child TABLE expands to fill 100% of this DIV's width.
    >>
    >>However in IE (6), the central DIV flows off the right-hand side of the
    >>page, because IE decides to (incorrectly) use the viewport as its
    >>reference for TABLE percentage measurements.

    >
    >
    >>Any ideas?

    >
    >
    > Don't use position:absolute for the middle container, but use margins
    > instead:
    >
    > #listing
    > {
    > margin-left: 250px;
    > margin-right: 250px;
    > }
    >
    > tested in IE6, Opera8 and FF1.0.4.


    Excellent, that does fix it! Cheers.


    --
    Oli
     
    Oli Filth, Jun 12, 2005
    #3
  4. Oli Filth

    dorayme Guest

    >http://olifilth.co.uk/01.html
    >
    > There are three DIVs (blue) with absolute positioning. The central DIV
    > contains a TABLE (pink) with CSS styling of width: 100%.
    >
    > In Firefox, it does what one would expect, i.e. the central DIV falls
    > between the ones on either side according to the CSS positioning, and
    > the child TABLE expands to fill 100% of this DIV's width.
    >
    > However in IE (6), the central DIV flows off the right-hand side of the
    > page, because IE decides to (incorrectly) use the viewport as its
    > reference for TABLE percentage measurements.
    >
    > I've read various things saying that to fix this, one should wrap the
    > TABLE in a <DIV width="100%"> or <DIV style="width: 100%">, however in
    > this case, neither seems to solve it.
    >
    > Any ideas?
    >


    In my best browser for css, Mozilla, the child table falls outside (on the
    right) of the central div (it has to really) when the window is reduced in
    width to about 60% of a 20" 1024x870 screen (a width not that small). Plus,
    there is all sorts of overlap trouble when the fonts are enlarged in
    everything *but* from within the table itself (good old tables, their strong
    point, a little world of their own, keeping their dignity and integrity in
    any rough sea).

    FYI

    dorayme
     
    dorayme, Jun 12, 2005
    #4
  5. Oli Filth

    Oli Filth Guest

    dorayme said the following on 12/06/2005 00:43:
    >>http://olifilth.co.uk/01.html
    >>

    >
    > In my best browser for css, Mozilla, the child table falls outside (on the
    > right) of the central div (it has to really) when the window is reduced in
    > width to about 60% of a 20" 1024x870 screen (a width not that small). Plus,
    > there is all sorts of overlap trouble when the fonts are enlarged in
    > everything *but* from within the table itself (good old tables, their strong
    > point, a little world of their own, keeping their dignity and integrity in
    > any rough sea).
    >


    You are right about the table overflowing when the window size is
    reduced, thanks for noticing that! However, I'm willing to live with
    that; most people using this site (it's for a private intranet) will be
    on big screens.

    --
    Oli
     
    Oli Filth, Jun 12, 2005
    #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. Replies:
    1
    Views:
    747
    Beauregard T. Shagnasty
    Dec 29, 2007
  2. Replies:
    7
    Views:
    194
    Tad McClellan
    Jun 22, 2006
  3. fred
    Replies:
    3
    Views:
    291
    Zifud
    Mar 17, 2005
  4. Swifty
    Replies:
    18
    Views:
    971
    Thomas 'PointedEars' Lahn
    Jan 23, 2012
  5. Replies:
    5
    Views:
    903
Loading...

Share This Page