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

R

Ryan Stewart

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?
 
D

DU

Ryan said:
The HTML:
<html>
<head>
<title>Blah</title>
<style>
<!--
div#content {
Click to expand...


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?
Click to expand...

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
 
R

Ryan Stewart

DU said:
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.
Click to expand...
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.
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
Click to expand...

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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Why is the e.target not working here? 1
CSS: How can I stop overflow on the y-axis? 2
How to position the *tooltip* comment on these buttons? 9
How can I get my menu inside of a menu to function properly? 1
Help with my responsive home page 2
Help with Visual Lightbox: Scripts 2
I am trying to detect Which image id="" was clicked ? 22
Please Help? 0

Members online

No members online now.
Total: 39 (members: 1, guests: 38)
Robots: 181

Forum statistics

Threads
473,764
Messages
2,569,564
Members
45,040
Latest member
papereejit

Latest Threads

Top