Topic: Positioning absolute inside relative div
hi everyone,
I have build my first website and I have just noticed that on IE6 one of the pages doesn't position right. It is not centered. I have placed Div container and placed another one inside positioned relatively. The container is centered using margin:15px auto 0, which works fine on other pages, but doesn't at the gallery page for some reason. Thank you so much for reading my post! I am a beginner and although I have tried to find an answer for my problem reading about CSS positioning I haven't found a solution....
The link is iwobar.net/design.html
Here is the code if someone could have a look at it. <html>
<html>
<head>
<title>design</title>
<style type="text/css">
div.img
{
margin: 2px;
height: 90px;
width: 90px;
float: left;
}
div.img img
{
display: inline;
margin:10px
;
border: 1px solid #ffffff;
}
div.img a:hover img
{
border: 1px solid black;
}
body{
background-image:url(images/container.png)}
#container{position:relative; width:960px;
margin:15px auto 0;
background: url(images/nowa_ja.png) 100% 0 no-repeat;}
#flash{float:right;margin: 40px 40px auto auto;}
#gallery {position:absolute; top:220px; left:110px;
width:600px;
height: 300px;
}
</style>
</head>
<body>
<div id="container" style="z-index:2;width:960px; height:660px;">
<div id="flash"style="z-index:3;width:627px; height:145;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="627" height="145" >
<param name="movie" value="images/buttons_bis.swf">
<param name="quality" value="high">
<embed src="images/buttons_bis.swf" width="627" height="145" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
</div>
<div id="gallery" >
<div class="img">
<a href="ruggedfoot logo.html">
<img src="images/logos/1s.jpg" width="90"
height="90" /> </a></div>
<div class="img">
<a href="my logo.html"> <img src="images/logos/3s.jpg" width="90"
height="90" /></a>
</div>
<div class="img">
<a href="my cafe.html">
<img src="images/m.jpg" width="90"
height="90" /></a> </div>
<div class="img">
<a href="rasha's.html">
<img src="images/rasha_s.jpg" width="90"
height="90" /></a>
</div>
<div class="img">
<a href="cd cover.html">
<img src="images/rasha_Cover_color.jpg" width="90"
height="90" /></a>
</div>
<div class="img">
<a href="poster2.html">
<img src="images/p1small.jpg" width="90"
height="90" /></a> </div>
<div class="img">
<a href="poster1.html">
<img src="images/p.jpg" width="90"
height="90" /></a> </div>
<div class="img">
<a href="witness.html">
<img src="images/pon.jpg" width="90"
height="90" /></a> </div>
<div class="img">
<a href="out2play.html">
<img src="images/out2play.jpg" width="90"
height="90" /></a> </div>
<div class="img">
<a href="leaflet_design.html">
<img src="images/future_s.jpg" width="90"
height="90" /></a> </div>
</div>
</div>
</body>
</html>
