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>Position Test</title>
<style type="text/css">
div#container {
position:relative;
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><!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></span>
it does not work as expected in IE7.
<img class="position" src="position_files/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:300px;left:200px;widt h:700px;border:1px
solid;background:orange;padding: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:relative;
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:
<img class="position" src="position_files/key.png" alt="Image of a
Key" title="Key Point">
</pre>
</div>
</body>
</html>
--
Gus
