CSS Forum

**Sleeping Troll** · 12:43 AM

This is my site: http://huduzu.trollnest.com

you will notice to the left and BELOW the "Orb screen" a set of buttons and if you hover over an "orb" you will see that the buttons shift down and an image appears, I would like these to have the same top values and indeed they do in my script, Anybody know what is causing this?

here is my html:

HTML Code:

<html>
<head>
<title>Just about everything</title>
<script type="text/javascript" src="Resources/prototype.js"></script>
<script type="text/javascript" src="Scripts/orbs.js"></script>
<link rel="stylesheet" href="CSS/style.css" type="text/css">
<style type="text/css">
<!--
.style1 {font-size: xx-large}
-->
</style>
</head>
<body onLoad="init()" onResize="resize()">
<div id="content">
 <img id="banner" src="http://www.webmaster-talk.com/images/Bnnr.png" name="banner">
 <div id="container"></div>
 <img id="snapshot" src="http://www.webmaster-talk.com/images/RingerNation" alt="">
 <div id="controls" align="center">
  <input type="button" name="Sound" value="Mute"><br>
  <input type="button" name="Sound" value="Mute"><br>
  <input type="button" name="Sound" value="Mute"><br>
  <input type="button" name="Sound" value="Mute"><br>
  <input type="button" name="Sound" value="Mute"><br>
  <input type="button" name="Sound" value="Mute"><br>
 </div>
 <div id="filter" align="center">
   <form id="filterForm" name="filterForm" method="get" action="/search.html">
         <label>
         Filter Term         
         <input type="text" name="q" class="text">
         </label>
         <input type="submit" name="Submit" value="Apply filter" class="text">
   </form>
 </div>
</div>
<!--end of contentArea-->
</body> 
 <embed hidden="true" src="sounds/warpedspace.mp3" pluginspage="http://www.macromedia.com/shockwave/download/" autostart="true" width="32" height="32"></embed>
</html>

here is my CSS:

Code:

html{
}
body{
}
#content {
 position: relative;
 background-color: #6600FF;
 left: 0px;
 top: 0px;
 border: 0;
 margin: 0;
 width: 100%;
}
#content #banner {
 position: relative;
 background-color: #CCCCCC;
 border: 0;
 margin: 0;
}
#content #controls {
 position: relative;
 border: 0;
 margin: 0;
}
#content #container{
 position: relative;
 background-color:#000000;
 overflow: hidden;
 border: 0;
 margin: 0;
}
#content #container img{
 position: absolute;
 border: 0;
 margin: 0;
}
#content #snapshot {
 position: relative;
 border: 0;
 margin: 0;
 display: "none";
}
#content #filter {
 position: relative;
 border: 0;
 margin: 0;
}

and finally here is the portion of my script that updates my CSS:

Code:

function resize(){
if (window.innerWidth){ //if browser supports window.innerWidth
 Dimensions.width=window.innerWidth;
 Dimensions.height=window.innerHeight;
}
else if (document.all){ //else if browser supports document.all (IE 4+)
 Dimensions.width=document.body.clientWidth;
 Dimensions.height=document.body.clientHeight;
}
  Zmax=Dimensions.width*2;
  Xmax=Dimensions.width*.6;
  Ymax=Xmax*.75;
 $("banner").style.top=0;
 $("banner").style.left=0;
 $("banner").style.width=100+"%";
 $("banner").style.height="auto";
 $("controls").style.top=Dimensions.height*.05+"px";
 $("controls").style.left=Dimensions.width*.01+"px";
 $("controls").style.width=Dimensions.width*.08+"px";
 $("controls").style.height=Ymax+"px";
 $("container").style.top=Dimensions.height*.05+"px";
 $("container").style.left=Dimensions.width*.1+"px";
 $("container").style.width=Xmax+"px";
 $("container").style.height=Ymax+"px";
 $("snapshot").style.top=Dimensions.height*.05+"px";
 $("snapshot").style.left=Dimensions.width*.75+"px";
 $("snapshot").style.width=Dimensions.width*.20+"px";
 $("snapshot").style.height="auto";
 $("filter").style.top=Dimensions.height*.50+"px";
 $("filter").style.left=Dimensions.width*.01+"px";
 $("filter").style.width=100+"%";
 $("filter").style.height="auto";
 OrbBaseRadius=Xmax/50;
  Xmin=0;
  Ymin=0;
  Zmin=0;
  Zscreen=Zmax*.25;
  Zeye=Zmax*1.1;
 InitialVelocity=Dimensions.width/Xmax*4;
}

Any help, greatly appreciated.

**Sleeping Troll** · 05-30-2009, 02:00 AM

Hey thanks too Lady in red, while reading the article on faux absolute positioning it occured to me exactly what my problem was! The Orb scren has overflow on all sides which allows modification of the Orbs while offscreen, out of site, out of mind!