IE overflow scrolling of relative positioned DIV

[Justin England]

Background:

I am working for a client putting a textbook online. The layout of the
textbook is straight forward and is easy enough to style with <h?>, <p>,
<uland <oltags. The text book also contains small images of a key that
represent a key point within the text. In the printed book, these keys are
positioned to the left of the text (in the margins if you will) and some
paragraphs may have more than one key. It is important to the client that
these keys be placed accordingly.

This posed a slight problem, but was easily solved (so I thought) using
absolute positioning. I wrap a paragraph within a <div style="position :
relative;"then the key image(s) is positioned 'absolute' with respect to
that particular <div(and are placed before the <pin the source). Easy
enough so far, give it a top: 0;(or whatever) and left: -60px; and the key
appears just like it should (and very damn close to how it looks in the
printed book).

The Problem:

The site layout is a non-liquid two column layout with a header. The right
column has a fixed height with overflow: auto; which works fine when the
content overflows the height of the right column, the scroll bars appear and
work as expected. The problem comes in when a <divhas position: relative;
in IE 7 and the content overflows the right column height. IE will not
include the position: relative; <div>'s in the scrollable content, even
though the initial containing <divis within the overflow: auto; <div>.

In Firefox and Opera (both windows and Unix (FreeBSD) ) it works just as
expected, but IE doesn't work. What I find odd, is that if I remove the
<doctypetag, it works just fine in all browsers including IE (found that
out by mistake), so I know that IE has the capability to do what I am
looking for.

Example:

To see an example of exactly what I am talking about, view
http://www.rapidcity.net/~justin/test/position.html
Both the HTML and CSS validate.

Everything is right there in the HTML so a simple "View Source" will show
you all the html and CSS.

The Question:

Is there a workaround for this in IE? I have searched but have not found
anything in reference to IE7. Or, is there a better way to position the key
images to the left of the text (and some cases need to be in the middle of
or at the bottom of the paragraph)? If I take out all the position:
attributes, it works perfectly in all browsers, but obviously the keys do
not appear as they should.

Thanks,

Justin England
ju****@rapidcit y.net

[=?ISO-8859-1?Q?G=E9rard_Talbot?=]

Justin England wrote :

[snipped]

The Problem:

The problem comes in when a <divhas position: relative;
in IE 7 and the content overflows the right column height. IE will not
include the position: relative; <div>'s in the scrollable content, even
though the initial containing <divis within the overflow: auto; <div>.

Example:

To see an example of exactly what I am talking about, view
http://www.rapidcity.net/~justin/test/position.html
Both the HTML and CSS validate.

This is a known bug.

Overflow auto and position: relative by Rowan Wigginton
http://rowanw.com/bugs/overflow_relative.htm

MSIE 6 and MSIE 7 bug with overflow and position: relative bug by Emmett
the Sane
http://mt-olympus.com/emmett/bug_ove...&overflow=auto

Pretty sure Bruno Fassino also has a test case like that for that
particular overflow and position: relative design.

MSIE 7 bugs collections
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

Justin, if you reduce that test page and leave it at your URL, I will
add it in my IE7 bugs page. If you do that, this can (will?) help make
Microsoft understand that this bug should be a priority.

Gérard
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/docs...your_Web_Pages

[=?ISO-8859-1?Q?G=E9rard_Talbot?=]

Gérard Talbot wrote:

Pretty sure Bruno Fassino also has a test case like that for that
particular overflow and position: relative design.

Yep!
http://www.brunildo.org/test/OverflowR.html

Gérard
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/docs...your_Web_Pages

[Gus Richter]

Justin England wrote:

To see an example of exactly what I am talking about, view
http://www.rapidcity.net/~justin/test/position.html
Both the HTML and CSS validate.

Is there a workaround for this in IE?

Here is my way that works for Fx, IE and Opera:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Positi on Test</title>

<style type="text/css">
div#container {
position:relati ve;
width: 55%;
height: 200px;
overflow: auto;
border: 1px solid red;
background-color: yellow;
}
div.box {
margin-left: 100px;
width: 50%;
border: 1px solid black;
background-color: gray;
}

span {font-size:10px;}
img.position {
position: absolute;
top: auto;
left: 2em;
}
</style>
</head>
<body>
<div id="container" >
<div class="box">
<p>
This box is positioned relative to it's container (the yellow box) and
the key to the left has been positioned absolute in reference to this
box. With the doctype of <span>&lt;!DOCT YPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; </span>
it does not work as expected in IE7.
<img class="position " src="position_f iles/key.png" alt="Image of a Key"
title="Key Point">
The gray boxes should stay withing
the confines of the yellow box. Once I remove the doctype tag,
(essentially putting IE in quirks mode) it works as expected. This
positioning works in FF 1.5 and Opera 9.2 on windows, and FF 1.5 on
Unix (FreeBSD) with the DOCTYPE tag. </p>
</div>
<div class="box">
<p>
Vestibulum lacinia. Quisque suscipit suscipit ligula. Integer
condimentum mollis nisl. Praesent in leo. Aenean nisl. Vivamus
venenatis. Aliquam felis. Duis ipsum nibh, pulvinar id, vehicula sed,
mattis id, nibh. Fusce suscipit, nisi vel pretium lacinia, massa nisl
consequat leo, non imperdiet eros orci sed sem. Donec ac mi in eros
interdum molestie. Nam aliquet mollis leo. Praesent tincidunt dolor at
erat. Curabitur mollis augue. Morbi vulputate enim sed ante. Sed non
tellus. Sed convallis dapibus quam. Vestibulum nonummy, turpis nec
tristique molestie, erat tortor consequat felis, a molestie nisl arcu a
dolor. Pellentesque tellus massa, accumsan eu, facilisis vel, sagittis
a, velit. </p>
</div>
<div class="box">
<p>
Integer tincidunt lacinia sem. Integer facilisis arcu nec nisi.
Maecenas a diam et justo fermentum porta. Vestibulum rhoncus. Mauris
tincidunt metus vitae enim. Nunc dignissim tincidunt elit. Mauris elit.
Maecenas interdum enim ac est. Nullam eu tortor eu massa elementum
sodales. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vivamus tincidunt. </p>
</div>
<p>
Quisque lacinia. Aliquam hendrerit viverra dolor. Sed non est. Etiam
ultrices turpis consectetuer justo. In metus ante, rutrum eget,
consectetuer sit amet, eleifend ut, ante. Donec nec tellus ac libero
blandit pharetra. Fusce vestibulum nibh tincidunt tortor. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Cras commodo molestie
lacus. Nulla accumsan tincidunt neque. Aliquam dolor. Maecenas eros
diam, gravida in, euismod convallis, porttitor sed, diam. </p>
<p>
Integer porta lorem sed dui. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Donec leo risus, ornare et, lobortis in, convallis
varius, erat. Etiam iaculis metus vitae lorem. Aenean tincidunt.
Quisque id lectus feugiat turpis imperdiet varius. Mauris sed sapien.
Fusce ac tortor ut neque porttitor tempus. Vivamus nonummy, mauris eget
fringilla dignissim, dolor felis pharetra sem, quis pharetra arcu augue
quis augue. Aenean sit amet tortor a dolor vulputate tincidunt.
Maecenas sapien ligula, rhoncus vitae, laoreet eget, molestie et,
lorem. Nam lectus. Nam nec nunc. Nullam felis dui, sodales at,
ultricies nec, sodales et, nulla. Morbi ante. Phasellus justo. </p>
</div>

<div
style="position :absolute;top:3 00px;left:200px ;width:700px;bo rder:1px
solid;backgroun d:orange;paddin g:6px;">
In this version, the scrollable portion is working now in IE, Fx and
Opera along with the image scrolling in sync with the "Key

Point" - with the changes as noted here:
<pre style="font-size:11px;">
div#container {
position:relati ve;
width: 55%;
height: 200px;
overflow: auto;
border: 1px solid red;
background-color: yellow;
}
div.box {
margin-left: 100px;
width: 50%;
border: 1px solid black;
background-color: gray;
}

span {font-size:10px;}
img.position {
position: absolute;
top: auto;
left: 2em;
}

At the "Key Point", the following is inserted:

&lt;img class="position " src="position_f iles/key.png" alt="Image of a
Key" title="Key Point">
</pre>
</div>

</body>
</html>

--
Gus