overflow: auto + position: absolute + NN 7.0 = bug?

Discussion in 'HTML' started by Ryan Stewart, Mar 3, 2004.

  1. Ryan Stewart

    Ryan Stewart Guest

    The HTML:
    <html>
    <head>
    <title>Blah</title>
    <style>
    <!--
    div#content {
    border: 1px solid blue;
    height: 75px;
    overflow: auto;
    position: relative;
    width: 100px;
    }

    div#box {
    border: 1px solid red;
    height: 25px;
    position: absolute;
    right: 20px;
    width: 25px;
    }
    -->
    </style>
    </head>

    <body>
    <div id="content">
    <div id="box">
    </div>
    <div>
    blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah
    blah blah blah blah blah blah blah blah
    </div>
    </div>
    </body>
    </html>

    This behaves as I would expect it to in IE 6.0. That is, I get a
    100x75 blue box with a vertical scrollbar and a 25x25 red box near the
    top right corner. In NN 7.0, the red box is gone. It is not completely
    gone, just lurking 20px from the right side of my browser window, and
    invisible as it is being clipped. If I make the window narrow enough,
    the red box comes into view in the outer div. If I remove the
    "overflow: auto;" from the content div, it displays as expected, but I
    lose the scrollbar which I need. Is there a way out of this?
    Ryan Stewart, Mar 3, 2004
    #1
    1. Advertising

  2. Ryan Stewart

    DU Guest

    Ryan Stewart wrote:
    > The HTML:
    > <html>
    > <head>
    > <title>Blah</title>
    > <style>
    > <!--
    > div#content {



    Very bad naming system. Your relatively positioned content div goes
    *outside* your absolutely positioned box div. When reading the code,
    this naming system is counter-intuitive, counter-meaningful.

    > border: 1px solid blue;
    > height: 75px;
    > overflow: auto;
    > position: relative;
    > width: 100px;
    > }
    >
    > div#box {
    > border: 1px solid red;
    > height: 25px;
    > position: absolute;
    > right: 20px;
    > width: 25px;
    > }
    > -->
    > </style>
    > </head>
    >
    > <body>
    > <div id="content">
    > <div id="box">
    > </div>
    > <div>
    > blah blah blah blah blah blah blah blah
    > blah blah blah blah blah blah blah blah
    > blah blah blah blah blah blah blah blah
    > blah blah blah blah blah blah blah blah
    > </div>
    > </div>
    > </body>
    > </html>
    >
    > This behaves as I would expect it to in IE 6.0. That is, I get a
    > 100x75 blue box with a vertical scrollbar and a 25x25 red box near the
    > top right corner. In NN 7.0, the red box is gone. It is not completely
    > gone, just lurking 20px from the right side of my browser window, and
    > invisible as it is being clipped. If I make the window narrow enough,
    > the red box comes into view in the outer div. If I remove the
    > "overflow: auto;" from the content div, it displays as expected, but I
    > lose the scrollbar which I need. Is there a way out of this?


    I'd say this is a bug (which is also happening in NS 7.1 btw).

    Here's a workaround that works for NS 7.1 and is rendered correctly in
    MSIE 6, Opera 7.5, Mozilla 1.6.

    Replace right:20px by left:56px. You may still need to adjust this value
    dynamically with client side javascript for NS 7.x as this browser does
    not position correctly (it's a bit short) the red bordered div.

    DU
    DU, Mar 3, 2004
    #2
    1. Advertising

  3. Ryan Stewart

    Ryan Stewart Guest

    "DU" <> wrote in message
    news:c25bqq$454$...
    > Ryan Stewart wrote:
    > > The HTML:
    > > <html>
    > > <head>
    > > <title>Blah</title>
    > > <style>
    > > <!--
    > > div#content {

    >
    >
    > Very bad naming system. Your relatively positioned content div goes
    > *outside* your absolutely positioned box div. When reading the code,
    > this naming system is counter-intuitive, counter-meaningful.
    >

    The names were spur-of-the-moment. Content was intended to mean "container
    for everything", while box was just a little box in the content, which could
    contain several such boxes.

    > > border: 1px solid blue;
    > > height: 75px;
    > > overflow: auto;
    > > position: relative;
    > > width: 100px;
    > > }
    > >
    > > div#box {
    > > border: 1px solid red;
    > > height: 25px;
    > > position: absolute;
    > > right: 20px;
    > > width: 25px;
    > > }
    > > -->
    > > </style>
    > > </head>
    > >
    > > <body>
    > > <div id="content">
    > > <div id="box">
    > > </div>
    > > <div>
    > > blah blah blah blah blah blah blah blah
    > > blah blah blah blah blah blah blah blah
    > > blah blah blah blah blah blah blah blah
    > > blah blah blah blah blah blah blah blah
    > > </div>
    > > </div>
    > > </body>
    > > </html>
    > >
    > > This behaves as I would expect it to in IE 6.0. That is, I get a
    > > 100x75 blue box with a vertical scrollbar and a 25x25 red box near the
    > > top right corner. In NN 7.0, the red box is gone. It is not completely
    > > gone, just lurking 20px from the right side of my browser window, and
    > > invisible as it is being clipped. If I make the window narrow enough,
    > > the red box comes into view in the outer div. If I remove the
    > > "overflow: auto;" from the content div, it displays as expected, but I
    > > lose the scrollbar which I need. Is there a way out of this?

    >
    > I'd say this is a bug (which is also happening in NS 7.1 btw).
    >
    > Here's a workaround that works for NS 7.1 and is rendered correctly in
    > MSIE 6, Opera 7.5, Mozilla 1.6.
    >
    > Replace right:20px by left:56px. You may still need to adjust this value
    > dynamically with client side javascript for NS 7.x as this browser does
    > not position correctly (it's a bit short) the red bordered div.
    >
    > DU


    Right. The problem is that the width of the outer div will not always be
    static, and it's not a set position from the left side of the screen, or the
    right for that matter. The outer div in this example is just one of several
    "viewing panes" of sorts. It's part of a user interface, and eventually the
    user will also be able to resize it, so you have a block of unknown size at
    an unknown position on the screen. I've experimented some with adjusting the
    red div's position via javascript with limited success, but I'd rather do it
    purely with CSS. There are other positioning options, though, for the red
    box. Ideally, I'd like it to be fixed near the bottom right corner of the
    outer div, but IE doesn't seem to support "position: fixed", so I was
    playing with absolute positioning. Then I hit this wall with Netscape. Time
    to try some different looks, I guess.
    Ryan Stewart, Mar 4, 2004
    #3
    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. Luqman
    Replies:
    1
    Views:
    649
    Luqman
    Feb 7, 2006
  2. alanborne
    Replies:
    1
    Views:
    677
    David Dorward
    Mar 16, 2005
  3. Adam Plocher
    Replies:
    4
    Views:
    25,371
    Adam Plocher
    May 26, 2006
  4. linkswanted
    Replies:
    1
    Views:
    886
  5. James Byrne
    Replies:
    3
    Views:
    544
    James Byrne
    Sep 14, 2010
Loading...

Share This Page