Problemer med positionering absolute, relative og z-indez
Alt ser fint ud i Firefox men i IE7 skubber indholdet sig på siden og der kommer vertikal scrollbar. "Background" sidder rigtig placeret men indholdet der ligger ovenpå, forskubber sig til højre. Håber der er nogen der kan hjælpe! :o)Sitet er bygget op af div:
<body>
<div id="outer">
<div id="background">
</div>
<div id="page_holder">
<div id="ContentHeader">
<div id="Logo">logoet</div>
</div>
<div id="topmenu">menu menu menu menu menu menu</div>
<div id="maincontent">
<div class="FCE_holder">
<div id="cols2">
<div class="leftCol_hovedskabelon">left</div>
<div class="rightCol_hovedskabelon">right</div>
</div>
</div>
</div>
<div id="footer">footer</div>
</div>
</div>
</body>
CSS:
html, body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font: 79% Verdana, Arial, Helvetica, sans-serif;
background-color:#000000;
color: #ffffff;
text-align:center;
height:100%;
}
/* LINKS */
a {color: #FFFFFF; text-decoration: none;}
a:hover { color: #FFFFFF; text-decoration: underline;}
a:visited { color: #FFFFFF; }
a img {border: none;}
#outer
{
width:900px;
height:700px;
position:absolute;
top:50%;
left:50%;
margin:-350px auto auto -450px;
text-align:center;
}
#background
{
top:200px;
position:relative;
width:900px;
height: 667px;
}
#page_holder{
top: 40px;
width:900px;
height: 667px;
margin:0px auto;
padding:0px;
z-index:2;
position:absolute;
text-align:center;
}
#ContentHeader{
height: 120px;
width: 900px;
margin-right:auto;
margin-left:auto;
}
#Logo{
height: 84px;
width: 900px;
text-align:center;
}
#topmenu {
width:900px;
height: 40px;
text-align:center;
}
.normaltext
{
background-color: #FFFFFF;
border: 0px;
margin: 0px;
padding:0px;
width:166px;
height:21px;
background: transparent url("../images/Search_BG.gif") repeat-x center top;
float: left;
padding-top: 0px;
text-align:left;
}
#maincontent {
width:700px;
height: 420px;
text-align:left;
padding-left:100px;
padding-right:100px;
padding-top:20px;
}
#footer {
text-align:center;
font-size: 11px;
color: #ffffff;
width:900px;
height: 22px;
margin: 0px;
padding:0px;
}
