473,573 Members | 5,087 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

IE overflow scrolling of relative positioned DIV

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
May 10 '07 #1
3 10858
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
May 11 '07 #2
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
May 11 '07 #3
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
May 11 '07 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
10994
by: Ken Kast | last post by:
Here's my situation. I have a statically positioned table that has an image in a cell. I also have some layers, defined by absolute-positioned DIVs for some animation. Everything works until I scroll/resize. Then the image "moves" on the screen but the animation doesn't. The net effect is that their relative positioning changes. I'd like...
2
12014
by: Catherine Lynn Wood | last post by:
I need to know how to overlap DIV content within 'relative' associated rendering. I am building div layers in the middle of a page and when I set positioning to absolute in the CSS, it references back to 0,0 on the entire page. If I set it to relative, the div layers will not overlap as needed. I prefer to avoid javascripting an 'innerHTML'...
4
8728
by: louissan | last post by:
Hi all, I've met a problem with Opera and its ability to render absolutely positioned divs inside relatively positioned parent blocks, themselves contained inside a relatively positioned block. I'm surely missing something, but what? Any help would be kindly appreciated :) Here's a code sample:
8
42512
by: Asad | last post by:
Hi, I am basically trying to accomplish drop down menus for navigation on a site. And I'm pretty much done except I am having one problem. The z-index is not working with relative positioning! Basically I have a page such as this: http://members.rogers.com/asadkhan2/prob2.jpg
6
9154
by: Andrew Poulos | last post by:
Say I have a text area. When the user clicks a button the entered text displays in a DIV. If there's too much text to fit in that DIV then the overflow text (the text that doesn't fit in the first DIV) displays in an adjacent DIV. Is there a way to know if there's "overflowing" text and, if there is, if there a way to know what that text...
2
2480
by: Rob R. Ainscough | last post by:
I'm slowly (very slowly) working my way thru the bizarre and sadistic world of control positioning in MultiViews (ASP 2.0). I came across this to help me explain (or attempt to anyway) why my web page controls were all over the place. "Ironically, absolute positioning is relative. Yes, you read that right. An absolutely positioned element...
7
9299
by: Cruelemort | last post by:
All, I have a div in my page that has a set width of 1000px, height of 200px, inside this i declare two more div's, both relatively positioned and floated left, the first is placed to the top left of the box and is a 30px square, the other one is set to 970px and is naturally positioned next to the square and so fills all the way to the...
0
2066
by: eelziere | last post by:
Hi All, I found the http://www.thescripts.com/forum/thread644980.html discussion, but none of the proposed solutions worked for me. Thanks in advance for your help! * The site: http://81.56.250.81/DAndC * The test scenario: 1) Click on the english flag (right bottom corner) to switch to English language
10
3256
by: Mark | last post by:
According to my book on CSS, if you apply 'position: relative' to a block-level element, it will stay exactly where it is. However, you can then use top, left etc. to offset the element relative to its position. However, looking at other people's stylesheets, I often see 'position: relative' applied to elements but without the use of top,...
0
7792
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7709
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8218
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
8091
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6435
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5605
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
3738
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
1330
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1049
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.