PDA

Click to See Complete Forum and Search --> : DIV positioning

jochem
12-17-2003, 01:37 AM
Below is the CSS code for positioning a number of layers, plus the HTML code that refers to it.
For some reason the layers #HEADER4, #HEADER5 and #CLIFF are not being displayed as supposed. This is in IE, NS and Mozilla.
The top, left and z-index are ignored. In stead they are shown below eachother in the top left corner of the #CONTENT div.
Can someone explain to me why?

Cheers, Jochem :cool:BODY {margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px; padding:0px; scrolling:no; background-color:#ffffff;}

#OUTER, #OUTER-L, #OUTER-R, #OUTER-B, #CONTENT, #HEADER1, #HEADER2, #HEADER3, #MENU, #MAIN, #FOOTER, #INDEX, #TEXT {position:absolute; visibility:visible; padding:0px;}
#OUTER-L, #OUTER-R, #OUTER-B, #HEADER1, #HEADER2, #HEADER3, #MENU, #MAIN, #FOOTER, #INDEX, #TEXT {background-position:0px 0px;}

#OUTER {width:824px; height:636px; left:50%; top:50%; Z-index:1; margin-left:-412px; margin-top:-318px; border:0px;}
#OUTER-L{width:33px; height:253px; left:0px; top:383px; Z-index:2; background-image:url("../IMG/BG_HiRes_OuterL.jpg");}
#OUTER-R{width:33px; height:253px; left:791px; top:383px; Z-index:2; background-image:url("../IMG/BG_HiRes_OuterR.jpg");}
#OUTER-B{width:758px; height:33px; left:33px; top:603px; Z-index:2; background-image:url("../IMG/BG_HiRes_OuterB.jpg");}
#CONTENT{width:750px; height:562px; left:50%; top:50%; Z-index:3; margin-left:-379px; margin-top:-285px; border:4px solid #000000;}
#HEADER1{width:344px; height:108px; left:0px; top:0px; Z-index:4; background-image:url("../IMG/BG_HiRes_Header01.jpg");}
#HEADER2{width:406px; height:65px; left:344px; top:0px; Z-index:4; background-image:url("../IMG/BG_HiRes_Header02.jpg");}
#HEADER3{width:406px; height:43px; left:344px; top:65px; Z-index:4; background-image:url("../IMG/BG_HiRes_Header03.gif");}
#HEADER4{width:322px; height:9px; left:428px; top:108px; Z-index:4; background-image:url("../IMG/BG_HiRes_Header04.gif");}
#HEADER5{width:291px; height:17px; left:459px; top:140px; Z-index:4; background-image:url("../IMG/BG_HiRes_Header05.gif");}
#CLIFF {width:128px; height:128px; left:0px; top:108px; Z-index:4; background-image:url("../IMG/BG_HiRes_Cliff.gif");}
#MENU {width:128px; height:326px; left:0px; top:236px; Z-index:4; background-image:url("../IMG/BG_HiRes_Menu.jpg");}
#MAIN {width:622px; height:216px; left:128px; top:346px; Z-index:4; background-image:url("../IMG/BG_HiRes_Main.jpg");}

#INDEX {width:200px; height:50px; left:128px; top:108px; Z-index:4; background-color:#ff0000;}
#TEXT {width:622px; height:404px; left:128px; top:108px; Z-index:4;
margin-left :0px;
margin-right :0px;
margin-top :55px;
margin-bottom :10px;}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>AlpineTrekking.com - climbing expeditions in the Andes</title>
<link rel="stylesheet" type="text/css" href="DIV/StyleSheets.css">
</head>

<body>
<div id="OUTER">
<div id="OUTER-L"></div>
<div id="OUTER-R"></div>
<div id="OUTER-B"></div>
</div>

<div id="CONTENT">
<div id="HEADER1"></div>
<div id="HEADER2"></div>
<div id="HEADER3"></div>
<div id="HEADER4"></div>
<div id="HEADER5"></div>
<div id="CLIFF"></div>
<div id="MENU"></div>
<div id="MAIN"></div>
<div id="INDEX">index</div>
<div id="TEXT">text body</div>
</div>
</body>
</html>
jochem
12-17-2003, 02:02 AM
Plus... why does an unused vertical scrollbar show up in IE?

Cheers, Jochem :cool:
jochem
12-17-2003, 09:40 AM
Solved. I forgot to add #HEADER3, #HEADER4 and #CLIFF to the lines which say position:absolute; and background-position:0px 0px;. Stupid me!

What remains though is the question why a vertical scrollbar shows up in a div-page in IE, while no scrolling is needed. In NS and Mozilla there is none.

Cheers, Jochem :cool: