473,748 Members | 8,779 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Position:absolu te - 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:absol ute". 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.dt d">
<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:yell ow;
margin:40px;
}
.container{
background:blue ;
border:2px solid red;
padding:15px;
position:relati ve;
}
.maincontent{
background:oran ge;
border:4px solid yellow;
margin-right:250px;
}
.sidebar{
background:gree n;
border:4px solid #ccc;
position:absolu te;
right:5px;
top:5px;
}
p{
font-size: large;
}
</style>
</head>
<body>
<div class="containe r">
<div class="maincont ent">
<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
"mainconten t" 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:relat ive". 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 8509
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:absol ute". 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:absol ute". 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.dt d">
<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="navigati on">
<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 "mainconten t", 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
4873
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 'left', 'right', 'top', and 'bottom' properties. These properties
4
3143
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 successfully by the online validators of w3.org.
4
19110
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 content? Is it a valid or stupid thing to do? Brian Tozer
2
6439
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 between "display='none'" and "display=''". However the problem is that - in Internet Explorer 6 the dropdown (<select>...) always hides the menu
3
2136
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 Steel
6
7582
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) http://www.redbrick.dcu.ie/~alex/golf/css/golf-main.css
2
1878
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 individual pic (I didn't want to use diff colour INPUT boxes because I wanted to display graphical buttons, rounded edges, etc - can you do this !?!?!) and now that I've done quite a few skins when I update the site having to update all of the skins...
0
1614
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 the screen and is right on FireFox elseif I write menubar {position: absolute;top:100px;} the menu bar is right with NSIE and not with FF How can I do to have a crossbrowser result of my menu var?
6
2883
by: ThunderMusic | last post by:
Hi, I think the subject says it all... thanks ThunderMusic
0
8989
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 usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9367
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 captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9319
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9243
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 choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6795
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 instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4599
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 the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3309
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 we have to send another system
2
2780
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2213
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 effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.