Fixed Positioning 1

[ClulessChris]

When using fixed positioning methods as shown on

http://annevankesteren.nl/2004/07/fixed-positioning

I find that the scrolling content seems to float in front of the fixed divs.
What am I missing?

Never knock on Death's door: ring the bell and run away! Death really hates that!

 

[Vragabond]

Which browser are you seeing the problem in? On the link you provided I am seeing exactly what I would be expecting from the code given.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[ClulessChris]

On the link it all seems to work fine.
however i've tried to encorporate this method into my css (see below) and get the results I first posted when using IE, Firefox, or Opera.

html, body, #wrapper{
	min-height: 100%;
	width: 98%;
	height: 100%;
	}
html>body, html>body#wrapper{
	height: auto;
	}
	
html>body div#header { position: fixed; }
html>body div#navBar { position: fixed; }

body{
	font-family: Helvetica, Arial, Sans-Serif;
	padding: 100px  0 0 160px;
	margin: 0;
	}

h1, h2, h3, h4, h5, h6{
	color: teal;
	margin: auto;
	}

p.headline{
	Color: #FF0000;
	font-weight: 700;
	font-size: 1.4em;
	}

#wrapper{
	Position: absolute; 
	left: auto; Top: 0;
	width: 98%;
	Padding: 5px;
	}
	
#header{
	position: absolute;
	top: 0px;
	left: 20px;
	height: 110px;
	width: 100%;
	margin: 0 auto;
	background-color: #FFFFFF;
	}

	
#navBar{
	position: absolute;
	width: 20%;
	left: 20px;
	Top: 100px;
	padding: 25px 5px 25px 5px;
	border: 1px solid black;
	font-size: .95em;
	background-color: #ffcc66;
	}

#content{
	position: absolute;	
	top: 100px;
	left: 75px;
	width: 76%;
	padding: 25px 0 8px 25px;
	border: none;
	font-size: 1em;
	}

#footer{ 
	position: absolute;
	padding: 10px 30%;
	bottom: 0;
	width: 98%;
	left: 1%;
	}


#RightImg{
	float: right;
	border: none;
	height: 240px; 
	width: 175px; 
	border: 0; 
	}

#layer1{
	background-color : #ffcc66; 
   	layer-background-color : #ffcc66;
   	border-width : 1px; 
   	border-style : solid; 
   	border-color : #006666; 
	padding: 5px;
   	width : 150px; 
   	top : 210px; 
   	left : 150px; 
   	position : absolute; 
   	z-index : 90; 
   	visibility : hidden; 
	}

#layer2{
   	background-color : #ffcc66; 
   	layer-background-color : #ffcc66;
   	border-width : 1px; 
   	border-style : solid; 
   	border-color : #006666;
	padding: 5px; 
   	width : 200px; 
   	top : 250px; 
   	left : 150px; 
   	position : absolute; 
   	z-index : 90; 
   	visibility : hidden; 
	}

#layer3{
   	background-color : #ffcc66; 
   	layer-background-color : #ffcc66;
  	border-width : 1px; 
  	border-style : solid; 
   	border-color : #006666;
	padding: 5px; 
   	width : 200px; 
   	top : 330px; 
   	left : 150px; 
   	position : absolute; 
   	z-index : 90; 
   	visibility : hidden; 
   	}

Never knock on Death's door: ring the bell and run away! Death really hates that!

 

[Vragabond]

Your entire page is positioned absolutely, which is never a good idea, whereas the page in the example has no absolute positioning (apart from absolute positioning sitting in for fixed positioning in IE6). That is why your page fails whereas the example page work.

One should be using absolute positioning only when absolutely necessary. As you are right now, you will experience many more downsides to absolute positioning if you continue using it for the entire page design. Almost anything you do via absolute positioning can be solved with floating and margins.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[ClulessChris]

Vargabond,
Many thanks for your help. I'll look into correcting this. I now at least know where to start.


Never knock on Death's door: ring the bell and run away! Death really hates that!