473,473 Members | 1,899 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

Position:absolute - missing scrollbar in IE6

Hello everybody,
can someone help me with this problem:
I'm creating a page with a sidebar, and I wanted to create the sidebar as a div
which gets a "position:absolute". The problem: if the sidebar's content is
longer than the main content, my IE6 will not create a vertical scrollbar for
the page, which makes the lower part of the sidebar unreadable.
Take this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title</title>
<style type="text/css">
body{
background:yellow;
margin:40px;
}
.container{
background:blue;
border:2px solid red;
padding:15px;
position:relative;
}
.maincontent{
background:orange;
border:4px solid yellow;
margin-right:250px;
}
.sidebar{
background:green;
border:4px solid #ccc;
position:absolute;
right:5px;
top:5px;
}
p{
font-size: large;
}
</style>
</head>
<body>
<div class="container">
<div class="maincontent">
<p>main content</p>
</div>
<div class="sidebar">
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
</div>
</div>
</body>
</html>
As you see, I have a "container", and within this container there is the
"maincontent" and the "sidebar". In order to get the sidebar to position in
relation to the container, and not the whole body, I gave the container a simple
"position:relative". As you can try, with IE6 you will not be able to scroll
down to read the whole sidebar. Mozilla behaves as wished.

Is this a IE6 bug?
Is there a workaround?
Am I doing something wrong? Because, if this really was a bug, absolute
positioning would have to be used with a lot of caution - the author would
always have to make sure the absolutely positioned element is not too long....

Thanks for any help,

Alex

Jul 20 '05 #1
3 8490
On Sat, 19 Jun 2004 20:53:22 GMT, Alexander Fischer <af***@firemail.de>
wrote:
Hello everybody,
can someone help me with this problem:
I'm creating a page with a sidebar, and I wanted to create the sidebar
as a div
which gets a "position:absolute". The problem: if the sidebar's content
is
longer than the main content, my IE6 will not create a vertical
scrollbar for
the page, which makes the lower part of the sidebar unreadable.


height: 100%; added to .container fixes this, somehow. Can't say I'm sure
why...
Jul 20 '05 #2
Neal <ne*****@yahoo.com> typed:
On Sat, 19 Jun 2004 20:53:22 GMT, Alexander Fischer
<af***@firemail.de> wrote:
Hello everybody,
can someone help me with this problem:
I'm creating a page with a sidebar, and I wanted to create the
sidebar as a div
which gets a "position:absolute". The problem: if the sidebar's
content is
longer than the main content, my IE6 will not create a vertical
scrollbar for
the page, which makes the lower part of the sidebar unreadable.


height: 100%; added to .container fixes this, somehow. Can't say I'm
sure why...


But then, in Opera 5, the container is limited to the browser height :-(

How would you create such a sidebar?
Alex

Jul 20 '05 #3
Neal <ne*****@yahoo.com> typed:
height: 100%; added to .container fixes this, somehow. Can't say I'm
sure why...


Now, I tried this with my page and it strangely affected the border and
background of some headings. Try this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>some title</title>
<style type="text/css">
#maincontent{
position: relative;
height:100%;
}
.navigation{
background: blue;
}
#primary{
margin-right:9em;
}
#secondary{
background: #FA0;
position: absolute;
right: 5px;
top: 21px;
width:8em;
}
#maincontent h1{
border:solid 2px #FA0;
background:#124;
color: #FA0;
}
#maincontent h2{
border:solid 2px #124;
background:#FA0;
color: black;
}
</style>
</head>
<body>
<div class="navigation">
<p>
this is the navigation top bar
</p>
</div>
<div id="maincontent">
<div id="primary">
<h1>HEADING 1</h1>
<h2>Heading 2</h2>
<p>Paragraph</p>
<p>Paragraph</p>
<h1>HEADING 1</h1>
<h2>Heading 2</h2>
<p>Paragraph</p>
<p>Paragraph</p>
</div>
<div id="secondary">
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
<p>sidebar</p>
</div>
</div>
</body>
</html>
The main container is called "maincontent", within it there is "primary" (which
takes the normal content) and "secondary" (the sidebar). I now added height=100%
to maincontent, which fixes the scroll problem - but see: the first h1 and h2
lost their background and border!

Isn't this strange? Anyone ever seen this bug before? (IE6)
Thanks and regards,
Alex
Jul 20 '05 #4

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

Similar topics

6
by: Harald Kirsch | last post by:
In the W3C document about CSS2, I read at http://www.w3.org/TR/REC-CSS2/visuren.html#choose-position the following: absolute The box's position (and possibly size) is specified with the...
4
by: Peter Pfannenschmid | last post by:
Hello experts, I would be very grateful if you would have a look at the following URL: http://www.omeganet.de/test.html The html file and the associated style have been validated...
4
by: KiwiBrian | last post by:
What would be the behaviour and characteristics of a div that was both positioned absolute, and floated? Are they contradictory or complementary regarding how the div is perceived by other...
2
by: Joachim Bauer | last post by:
I'm using the code below to display a menu that opens when the mouse goes over the main menu item (try it in your browser to understand the behaviour). It uses "position:absolute" and a switch...
3
by: Steel | last post by:
Hi at all, I'ld want to know if position:absolute is crossbrowser. Infact I cannot position absolutely an element in the some place with fox-pro and MSIE6 There is always a little difference...
6
by: alex | last post by:
I'm playing around with css popups a la http://www.meyerweb.com/eric/css/edge/popups/demo.html for here: http://www.redbrick.dcu.ie/~alex/golf/courseinfo.html (css)...
2
by: Laphan | last post by:
Hi All I have developed a site whereby it uses the contents of a folder (incs gifs, jpgs and css files) to display the web 'skin' of the site. This is OK, but each button on the site is an...
0
by: Pablito | last post by:
Hi at all, I have a little problem about position:absolute. I want to position absolutely a menu bar. if I write: menubar {position: absolute;top:5.2em;} with MSIE the menu bar is too height on...
6
by: ThunderMusic | last post by:
Hi, I think the subject says it all... thanks ThunderMusic
0
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...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
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...
1
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
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...
0
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
1
muto222
php
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
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...

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.