Alternative for framed site

Discussion in 'HTML' started by Nico Schuyt, Mar 10, 2005.

  1. Nico Schuyt

    Nico Schuyt Guest

    Long long time ago I built a framed site: http://www.vleeskens.nl/ :)
    The layout was designed in Corel Draw by someone else and I was not allowed
    to change it. At that time I couldn't think of an an alternative for frames.
    New atempt:
    A (stable) layout with only div boxes seems to be impossible to make with
    this layout.
    On http://www.vleeskens.nl/p_basis2.htm an iframe is applied and some more
    CSS. Could be an improvement but I don't like iframes.
    On http://www.vleeskens.nl/p_div.htm a design using a table in combination
    with a scrollable div. A snippet of javascript is used to make it scrollable
    in Mozilla based browsers. Result looks good in IE but in FireFox it
    collapses and in Opera it's bad: The content div has no height.

    The problem could be solved if I knew how to assign a height: 90% to a div
    in a table with height: 100%.
    Anyone an idea how to realize that?

    --
    Nico
    http://www.nicoschuyt.nl
     
    Nico Schuyt, Mar 10, 2005
    #1
    1. Advertising

  2. Nico Schuyt

    Spartanicus Guest

    "Nico Schuyt" <> wrote:

    >The problem could be solved if I knew how to assign a height: 90% to a div
    >in a table with height: 100%.


    body{margin:0;padding:0}
    html,body,table,td{height:100%}
    div{height:90%}

    --
    Spartanicus
     
    Spartanicus, Mar 10, 2005
    #2
    1. Advertising

  3. Nico Schuyt

    Nico Schuyt Guest

    Spartanicus wrote:
    > "Nico Schuyt" wrote:


    >> The problem could be solved if I knew how to assign a height: 90% to
    >> a div in a table with height: 100%.


    > body{margin:0;padding:0}
    > html,body,table,td{height:100%}
    > div{height:90%}


    Well, that's in principal the same as I did.
    I added an overflow:auto to the div in your code and end up in
    http://www.vleeskens.nl/p_height.htm
    IE: OK
    FF: Table is too high
    Opera: The div has a height of zero :-(

    --
    Nico
    http://www.nicoschuyt.nl
     
    Nico Schuyt, Mar 10, 2005
    #3
  4. Nico Schuyt

    Spartanicus Guest

    "Nico Schuyt" <> wrote:

    >>> The problem could be solved if I knew how to assign a height: 90% to
    >>> a div in a table with height: 100%.

    >
    >> body{margin:0;padding:0}
    >> html,body,table,td{height:100%}
    >> div{height:90%}

    >
    >Well, that's in principal the same as I did.
    >I added an overflow:auto to the div in your code and end up in
    >http://www.vleeskens.nl/p_height.htm
    >IE: OK
    >FF: Table is too high
    >Opera: The div has a height of zero :-(


    http://homepage.ntlworld.com/spartanicus/nico.htm


    --
    Spartanicus
     
    Spartanicus, Mar 10, 2005
    #4
  5. Nico Schuyt

    Nico Schuyt Guest

    Spartanicus wrote:
    > "Nico Schuyt" <> wrote:
    >
    >>>> The problem could be solved if I knew how to assign a height: 90%
    >>>> to a div in a table with height: 100%.


    >>> body{margin:0;padding:0}
    >>> html,body,table,td{height:100%}
    >>> div{height:90%}


    >> Well, that's in principal the same as I did.
    >> I added an overflow:auto to the div in your code and end up in
    >> http://www.vleeskens.nl/p_height.htm
    >> IE: OK
    >> FF: Table is too high
    >> Opera: The div has a height of zero :-(


    > http://homepage.ntlworld.com/spartanicus/nico.htm


    OK, that works fine. The problem occurs when there's more text. IE handles
    it correctly with overflow:auto but FF en Opera fail :-(

    --
    Nico
    http://www.nicoschuyt.nl
     
    Nico Schuyt, Mar 10, 2005
    #5
  6. Nico Schuyt

    Spartanicus Guest

    "Nico Schuyt" <> wrote:

    >> http://homepage.ntlworld.com/spartanicus/nico.htm

    >
    >OK, that works fine. The problem occurs when there's more text. IE handles
    >it correctly with overflow:auto but FF en Opera fail :-(


    I can't be bothered to look up the why, but I can guarantee you that IE
    get's it wrong, and FF & Opera get it right.

    Ditching the table would probably solve it, but you should dump the
    whole idea, scrolling divs are a usability nightmare.

    --
    Spartanicus
     
    Spartanicus, Mar 10, 2005
    #6
  7. Nico Schuyt

    Nico Schuyt Guest

    Spartanicus wrote:
    > "Nico Schuyt" <> wrote:


    >>> http://homepage.ntlworld.com/spartanicus/nico.htm


    >> OK, that works fine. The problem occurs when there's more text. IE
    >> handles it correctly with overflow:auto but FF en Opera fail :-(


    > I can't be bothered to look up the why, but I can guarantee you that
    > IE get's it wrong,


    I'm not so sure. The browser is instructed (suggested :) to render a table
    as 100% height
    of window size and a div with 90% of the height of the cel. IE does so.

    > and FF & Opera get it right.


    FF and Opera render the page completely different

    > Ditching the table would probably solve it, but you should dump the
    > whole idea, scrolling divs are a usability nightmare.


    The alternatives (frame and iframe) are not ideal too. I don't think it's
    possible to create this specific design with div's only.

    Thanks anyway!

    --
    Nico
    http://www.nicoschuyt.nl
     
    Nico Schuyt, Mar 10, 2005
    #7
  8. in alt.html, Nico Schuyt wrote:
    > Spartanicus wrote:
    > > "Nico Schuyt" <> wrote:
    > >
    > >>>> The problem could be solved if I knew how to assign a height: 90%
    > >>>> to a div in a table with height: 100%.

    >
    > >>> body{margin:0;padding:0}
    > >>> html,body,table,td{height:100%}
    > >>> div{height:90%}

    >
    > >> Well, that's in principal the same as I did.
    > >> I added an overflow:auto to the div in your code and end up in
    > >> http://www.vleeskens.nl/p_height.htm
    > >> IE: OK
    > >> FF: Table is too high
    > >> Opera: The div has a height of zero :-(

    >
    > > http://homepage.ntlworld.com/spartanicus/nico.htm

    >
    > OK, that works fine. The problem occurs when there's more text. IE handles
    > it correctly with overflow:auto but FF en Opera fail :-(


    Opera 7.5 IIRC handle isssue better than older/newer. Try applying width,
    it fixes issue on all Opera 7, IIRC.

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Utrecht, NL.
     
    Lauri Raittila, Mar 10, 2005
    #8
  9. Nico Schuyt

    Nico Schuyt Guest

    Lauri Raittila wrote:
    > in alt.html, Nico Schuyt wrote:
    >> Spartanicus wrote:


    >>> http://homepage.ntlworld.com/spartanicus/nico.htm


    >> OK, that works fine. The problem occurs when there's more text. IE
    >> handles it correctly with overflow:auto but FF en Opera fail :-(


    > Opera 7.5 IIRC handle isssue better than older/newer.


    "Best viewed with Opera 7.5000000"

    > Try applying
    > width, it fixes issue on all Opera 7, IIRC.


    A width property on the div has no effect in Opera 7.54
    (http://www.vleeskens.nl/p_height.htm) :-(

    --
    Nico
    http://www.nicoschuyt.nl
     
    Nico Schuyt, Mar 10, 2005
    #9
  10. in alt.html, Nico Schuyt wrote:
    > Lauri Raittila wrote:
    > > in alt.html, Nico Schuyt wrote:
    > >> Spartanicus wrote:

    >
    > >>> http://homepage.ntlworld.com/spartanicus/nico.htm

    >
    > >> OK, that works fine. The problem occurs when there's more text. IE
    > >> handles it correctly with overflow:auto but FF en Opera fail :-(

    >
    > > Opera 7.5 IIRC handle isssue better than older/newer.

    >
    > "Best viewed with Opera 7.5000000"


    Actually, it is not exactly same problem...
    I didn't notice your undefined use of CSS:

    http://www.w3.org/TR/CSS21/tables.html#height-layout
    http://www.w3.org/TR/CSS2/tables.html#height-layout
    | CSS 2[.1] does not define what percentage values of 'height' refer to
    | when specified for table cells.

    > A width property on the div has no effect in Opera 7.54
    > (http://www.vleeskens.nl/p_height.htm) :-(


    Add:
    td {position:relative;}
    div {position:absolute;}

    And it magically starts working on Opera 8b2...

    You can see the bug I was talking about here:
    http://www.student.oulu.fi/~laurirai/_bugs/position_bug_incorrect.html

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Utrecht, NL.
     
    Lauri Raittila, Mar 10, 2005
    #10
  11. Nico Schuyt

    Nico Schuyt Guest

    Lauri Raittila wrote:
    > in alt.html, Nico Schuyt wrote:
    >> Lauri Raittila wrote:
    >>> in alt.html, Nico Schuyt wrote:
    >>>> Spartanicus wrote:

    >>
    >>>>> http://homepage.ntlworld.com/spartanicus/nico.htm

    >>
    >>>> OK, that works fine. The problem occurs when there's more text. IE
    >>>> handles it correctly with overflow:auto but FF en Opera fail :-(

    >>
    >>> Opera 7.5 IIRC handle isssue better than older/newer.

    >>
    >> "Best viewed with Opera 7.5000000"

    >
    > Actually, it is not exactly same problem...
    > I didn't notice your undefined use of CSS:
    >
    > http://www.w3.org/TR/CSS21/tables.html#height-layout
    > http://www.w3.org/TR/CSS2/tables.html#height-layout
    >> CSS 2[.1] does not define what percentage values of 'height' refer to
    >> when specified for table cells.

    >
    >> A width property on the div has no effect in Opera 7.54
    >> (http://www.vleeskens.nl/p_height.htm) :-(


    > Add:
    > td {position:relative;}
    > div {position:absolute;}
    > And it magically starts working on Opera 8b2...
    > You can see the bug I was talking about here:
    > http://www.student.oulu.fi/~laurirai/_bugs/position_bug_incorrect.html


    What on earth made you think of that solution? Was it trial and error or is
    it genius? A compliment anyway.
    Works great in Opera! In IE however the border of the table cell disappears
    and in FF the width of the div is not related to the width of the cell.
    http://www.vleeskens.nl/p_height.htm

    --
    Nico
    http://www.nicoschuyt.nl
     
    Nico Schuyt, Mar 11, 2005
    #11
  12. in alt.html, Nico Schuyt wrote:
    > Lauri Raittila wrote:
    > > in alt.html, Nico Schuyt wrote:
    > >> Lauri Raittila wrote:
    > >>> in alt.html, Nico Schuyt wrote:
    > >>>> Spartanicus wrote:
    > >>
    > >>>>> http://homepage.ntlworld.com/spartanicus/nico.htm
    > >>
    > >>>> OK, that works fine. The problem occurs when there's more text. IE
    > >>>> handles it correctly with overflow:auto but FF en Opera fail :-(
    > >>
    > >>> Opera 7.5 IIRC handle isssue better than older/newer.
    > >>
    > >> "Best viewed with Opera 7.5000000"

    > >
    > > Actually, it is not exactly same problem...
    > > I didn't notice your undefined use of CSS:
    > >
    > > http://www.w3.org/TR/CSS21/tables.html#height-layout
    > > http://www.w3.org/TR/CSS2/tables.html#height-layout
    > >> CSS 2[.1] does not define what percentage values of 'height' refer to
    > >> when specified for table cells.

    > >
    > >> A width property on the div has no effect in Opera 7.54
    > >> (http://www.vleeskens.nl/p_height.htm) :-(

    >
    > > Add:
    > > td {position:relative;}
    > > div {position:absolute;}
    > > And it magically starts working on Opera 8b2...
    > > You can see the bug I was talking about here:
    > > http://www.student.oulu.fi/~laurirai/_bugs/position_bug_incorrect.html

    >
    > What on earth made you think of that solution?


    Accident. I tried on what happens when I remove top:0...

    > Was it trial and error or is it genius?


    Actually, it just uses bug in Opera, which I didn't first see. It seems
    to be that Opera ignores td with position:relative, and thus uses
    viewport height. Easy to see by adding
    table {margin-top:1em;}
    div {top:0;}

    So, this is actually yet another bug in Opera... X-posting to
    opera.page-display...

    Correct way would be

    div {position:absolute;top:0;bottom:10%;}

    > Works great in Opera! In IE however the border of the table cell disappears
    > and in FF the width of the div is not related to the width of the cell.
    > http://www.vleeskens.nl/p_height.htm


    Tables and overflow have been problem since beginning.
    It's ironic as most natural and only good use I can think for overflow
    property is:
    table {max-height:100%;}
    tbody {overflow:auto;}

    (limiting table to be maximum of viewport height, and keep headers and
    footer on place while scrolling table content...)

    Of course, it is hardly surprising as tables are least and worst
    supported HTML thing, and overflow is same for CSS. AFAIK there is no
    browser that would do either correctly, let alone both...




    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Utrecht, NL.
     
    Lauri Raittila, Mar 11, 2005
    #12
  13. Nico Schuyt

    the idiot Guest

    "Nico Schuyt" <> wrote in message
    news:42301ef1$0$17653$...
    > Long long time ago I built a framed site: http://www.vleeskens.nl/ :)
    > The layout was designed in Corel Draw by someone else and I was not

    allowed
    > to change it. At that time I couldn't think of an an alternative for

    frames.
    > New atempt:
    > A (stable) layout with only div boxes seems to be impossible to make with
    > this layout.
    > On http://www.vleeskens.nl/p_basis2.htm an iframe is applied and some more
    > CSS. Could be an improvement but I don't like iframes.
    > On http://www.vleeskens.nl/p_div.htm a design using a table in combination
    > with a scrollable div. A snippet of javascript is used to make it

    scrollable
    > in Mozilla based browsers. Result looks good in IE but in FireFox it
    > collapses and in Opera it's bad: The content div has no height.
    >
    > The problem could be solved if I knew how to assign a height: 90% to a div
    > in a table with height: 100%.
    > Anyone an idea how to realize that?
    >

    erm i hope i havent misread but.... you say you used a bit of javascript to
    make the scrolling div work in mozilla based browsers - i have scrolling
    divs on a website i have done www.seanmcallister.com and it works in
    mozilla and firefox and opera without any javascript.....
     
    the idiot, Mar 11, 2005
    #13
  14. Nico Schuyt

    the idiot Guest

    "Spartanicus" <> wrote in message
    news:...
    > "Nico Schuyt" <> wrote:
    >
    > >> http://homepage.ntlworld.com/spartanicus/nico.htm

    > >
    > >OK, that works fine. The problem occurs when there's more text. IE

    handles
    > >it correctly with overflow:auto but FF en Opera fail :-(

    >
    > I can't be bothered to look up the why, but I can guarantee you that IE
    > get's it wrong, and FF & Opera get it right.
    >
    > Ditching the table would probably solve it, but you should dump the
    > whole idea, scrolling divs are a usability nightmare.
    >
    > --

    you cant say that - ive only just started using scrolling divs instead of
    iframes ;-] ... what do you mean about them being a usability nightmare?
     
    the idiot, Mar 11, 2005
    #14
  15. Nico Schuyt

    Nico Schuyt Guest

    the idiot wrote:
    > "Nico Schuyt" wrote in message


    >> On http://www.vleeskens.nl/p_div.htm a design using a table in
    >> combination with a scrollable div. A snippet of javascript is used
    >> to make it scrollable in Mozilla based browsers.


    > erm i hope i havent misread but.... you say you used a bit of
    > javascript to make the scrolling div work in mozilla based browsers -
    > i have scrolling divs on a website i have done www.seanmcallister.com
    > and it works in mozilla and firefox and opera without any
    > javascript.....


    I looked at the http://www.seanmcallister.com/html/enemy.html, but no
    scrolling in FF. In Opera only when I first click to get the focus :-(

    --
    Nico
    http://www.nicoschuyt.nl
     
    Nico Schuyt, Mar 11, 2005
    #15
  16. Nico Schuyt

    Spartanicus Guest

    "the idiot" <> wrote:

    >> Ditching the table would probably solve it, but you should dump the
    >> whole idea, scrolling divs are a usability nightmare.
    >>

    >you cant say that - ive only just started using scrolling divs instead of
    >iframes ;-] ... what do you mean about them being a usability nightmare?


    It requires users to drag the scrollbar with their mouse, the mouse
    wheel won't work, keyboard navigation won't work, it falsely makes it
    look like the amount of information on the page is less that what it is,
    but only in the visual css enabled domain.

    --
    Spartanicus
     
    Spartanicus, Mar 11, 2005
    #16
  17. Nico Schuyt

    the idiot Guest

    "Nico Schuyt" <> wrote in message
    news:42320988$0$17334$...
    > the idiot wrote:
    > > "Nico Schuyt" wrote in message

    >
    > >> On http://www.vleeskens.nl/p_div.htm a design using a table in
    > >> combination with a scrollable div. A snippet of javascript is used
    > >> to make it scrollable in Mozilla based browsers.

    >
    > > erm i hope i havent misread but.... you say you used a bit of
    > > javascript to make the scrolling div work in mozilla based browsers -
    > > i have scrolling divs on a website i have done www.seanmcallister.com
    > > and it works in mozilla and firefox and opera without any
    > > javascript.....

    >
    > I looked at the http://www.seanmcallister.com/html/enemy.html, but no
    > scrolling in FF. In Opera only when I first click to get the focus :-(
    >
    > --

    weird cos iver got ff and it works in mine... eek i am using version0.9 back
    to the drawing board maybe arghhhh
    what about this one http://www.207g.karoo.net/moller1/html/m14.html btw
    dont read the words if easily offended....
     
    the idiot, Mar 11, 2005
    #17
  18. Nico Schuyt

    Nico Schuyt Guest

    Lauri Raittila wrote:
    > in alt.html, Nico Schuyt wrote:
    >> Lauri Raittila wrote:
    >>> in alt.html, Nico Schuyt wrote:
    >>>> Lauri Raittila wrote:
    >>>>> in alt.html, Nico Schuyt wrote:
    >>>>>> Spartanicus wrote:
    >>>>
    >>>>>>> http://homepage.ntlworld.com/spartanicus/nico.htm
    >>>>
    >>>>>> OK, that works fine. The problem occurs when there's more text.
    >>>>>> IE handles it correctly with overflow:auto but FF en Opera fail
    >>>>>> :-(
    >>>>
    >>>>> Opera 7.5 IIRC handle isssue better than older/newer.
    >>>>
    >>>> "Best viewed with Opera 7.5000000"
    >>>
    >>> Actually, it is not exactly same problem...
    >>> I didn't notice your undefined use of CSS:
    >>>
    >>> http://www.w3.org/TR/CSS21/tables.html#height-layout
    >>> http://www.w3.org/TR/CSS2/tables.html#height-layout
    >>>> CSS 2[.1] does not define what percentage values of 'height' refer
    >>>> to when specified for table cells.
    >>>
    >>>> A width property on the div has no effect in Opera 7.54
    >>>> (http://www.vleeskens.nl/p_height.htm) :-(

    >>
    >>> Add:
    >>> td {position:relative;}
    >>> div {position:absolute;}
    >>> And it magically starts working on Opera 8b2...
    >>> You can see the bug I was talking about here:
    >>> http://www.student.oulu.fi/~laurirai/_bugs/position_bug_incorrect.html

    >>
    >> What on earth made you think of that solution?

    >
    > Accident. I tried on what happens when I remove top:0...
    >
    >> Was it trial and error or is it genius?

    >
    > Actually, it just uses bug in Opera, which I didn't first see. It
    > seems to be that Opera ignores td with position:relative, and thus
    > uses viewport height. Easy to see by adding
    > table {margin-top:1em;}
    > div {top:0;}
    >
    > So, this is actually yet another bug in Opera... X-posting to
    > opera.page-display...
    >
    > Correct way would be
    >
    > div {position:absolute;top:0;bottom:10%;}
    >
    >> Works great in Opera! In IE however the border of the table cell
    >> disappears and in FF the width of the div is not related to the
    >> width of the cell. http://www.vleeskens.nl/p_height.htm

    >
    > Tables and overflow have been problem since beginning.
    > It's ironic as most natural and only good use I can think for overflow
    > property is:
    > table {max-height:100%;}
    > tbody {overflow:auto;}
    >
    > (limiting table to be maximum of viewport height, and keep headers and
    > footer on place while scrolling table content...)
    >
    > Of course, it is hardly surprising as tables are least and worst
    > supported HTML thing, and overflow is same for CSS. AFAIK there is no
    > browser that would do either correctly, let alone both...


    OK, thanks so far Lauri! I think the conclusion of this little excercise is
    that it's not advicable to use a scrollable div to create this layout.
    Unless you have a better solution I think I'll apply an iframe with a
    complete alternative text.

    --
    Nico
    http://www.nicoschuyt.nl
     
    Nico Schuyt, Mar 11, 2005
    #18
  19. Nico Schuyt

    the idiot Guest

    "Nico Schuyt" <> wrote in message
    news:42320988$0$17334$...
    > the idiot wrote:
    > > "Nico Schuyt" wrote in message

    >
    > >> On http://www.vleeskens.nl/p_div.htm a design using a table in
    > >> combination with a scrollable div. A snippet of javascript is used
    > >> to make it scrollable in Mozilla based browsers.

    >
    > > erm i hope i havent misread but.... you say you used a bit of
    > > javascript to make the scrolling div work in mozilla based browsers -
    > > i have scrolling divs on a website i have done www.seanmcallister.com
    > > and it works in mozilla and firefox and opera without any
    > > javascript.....

    >
    > I looked at the http://www.seanmcallister.com/html/enemy.html, but no
    > scrolling in FF. In Opera only when I first click to get the focus :-(
    >

    erm opera 7.5 and 7.6 they work fine too.... (for me)
    i think i may have to get out my gun...
     
    the idiot, Mar 11, 2005
    #19
  20. Nico Schuyt

    the idiot Guest

    "Spartanicus" <> wrote in message
    news:...
    > "the idiot" <> wrote:
    >
    > >> Ditching the table would probably solve it, but you should dump the
    > >> whole idea, scrolling divs are a usability nightmare.
    > >>

    > >you cant say that - ive only just started using scrolling divs instead of
    > >iframes ;-] ... what do you mean about them being a usability nightmare?

    >
    > It requires users to drag the scrollbar with their mouse, the mouse
    > wheel won't work, keyboard navigation won't work, it falsely makes it
    > look like the amount of information on the page is less that what it is,
    > but only in the visual css enabled domain.
    >
    > --

    eek but
    whats wrong with it 'falsley making it look like the amount of info on the
    page is less than what it is' i dont understand

    cheers though...
     
    the idiot, Mar 11, 2005
    #20
    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. =?Utf-8?B?Q2hyaXN0b3BoZXI=?=

    Sessions when using Framed web site?

    =?Utf-8?B?Q2hyaXN0b3BoZXI=?=, Jan 25, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    356
    Steve C. Orr [MVP, MCSD]
    Jan 26, 2004
  2. =?Utf-8?B?Q2xhcw==?=
    Replies:
    0
    Views:
    1,514
    =?Utf-8?B?Q2xhcw==?=
    Nov 10, 2005
  3. Chumpmeister

    help read URL from framed JSP

    Chumpmeister, May 28, 2004, in forum: Java
    Replies:
    2
    Views:
    2,397
    ExGuardianReader
    May 29, 2004
  4. ppcguy
    Replies:
    1
    Views:
    632
    Andrea Desole
    Aug 8, 2005
  5. DiLu790

    Way to Redirect Framed Page???

    DiLu790, Dec 14, 2003, in forum: HTML
    Replies:
    24
    Views:
    1,165
    Hywel Jenkins
    Dec 16, 2003
Loading...

Share This Page