Page appears some what off in Object

[Kage Kazumi]

As most who know who have been helping me. I have a list that need to be embedded in forum post. Now I know how to do this, but the page (logo section) is off alignment. How can I fix this so it aligns on the site and inside the OBJECT element on the other site.

Site: http://zanime.net
Object Section: http://forums.kevenpirritano.com/index.php?/topic/2-finally-going-to-start-writing/page__p__4#entry4

HTML


<div id="logo-container">
<img src="images/logo.png" alt="" />
<input type="reset" value="Intructions" id="instructions">
<input type="reset" value="Reset" id="reset">
</div>
<div id="dropdown-container">
<div id="dropdown-header">
<span>Software Filter</span>
</div>
<p id="dropdown-description">
<select name="filterBox1" id="filterBox1">
<option value="">OS</option>
<option value="Windows" id="windows">Windows</option>
<option value="Linux" id="linux">Linux</option>
<option value="Mac" id="mac">Mac</option>
</select>
<br />
<select name="filterBox2" id="filterBox2">
<option value="">Type</option>
<option value="2D">2D</option>
<option value="3D">3D</option>
<option value="2D3D">2D & 3D</option>
</select>
<br />
<select name="filterBox3" id="filterBox3">
<option value="">Price Type</option>
<option value="Free">Free</option>
<option value="Commercial">Commercial</option>
</select>
</p>
<div id="dropdown-footer">
</div>
</div>


CSS


#logo-container{
width:295px;
height:50px;
position:relative;
top:90px;
left:450px;
}
#dropdown-container{
width:120px;
margin:auto; /*this may be removed */
border:1px solid #000;
border-radius:5px 5px 0 0;
background-image:url(../images/table-bg.jpg);
overflow:hidden;
box-shadow:6px 6px 6px #666; /*this may be removed */
text-align: left;
position:relative;
left:190px;
}
#dropdown-header{
padding:4px;
background-image:url(../images/bg-title.png);
background-repeat:repeat-x;
background-position:0 -2px;
font-size: 15px;
font-weight:bold;
text-shadow: 1px 1px 1px #143607;
filter: dropshadow(color=#143607, offx=1, offy=1);
color:#fff;
}
#dropdown-description{
float:left;
width:160px;
height:65px;
padding:3px 10px;
margin:0;
font-weight:bold;
}
#dropdown-footer{
clear:both;
padding:4px;
background-color:#466505;
font-size:17px;
text-shadow:1px 1px 1px #143607;
filter: dropshadow(color=#143607, offx=1, offy=1);
color:#eee;
overflow:hidden;
}

[bernie1227]

in Javascript, you could check if the website is in a frame, as it is embedded in the post with something like:


if (window.top != window.self){
}

And then adjust your css accordingly. So you could, for example change the positioning of objects if the website is in an iframe. So, something like:


if (window.top != window.self){
document.getElementById('dropdown-container').style.css = /*etc...*/ ;
}


Or alternatively, seeing how it appears to be your site, you could adjust how embedded websites appear on the site. If you don't want to edit the source code yourself, go take a look at the forum makers website (http://www.invisionpower.com/apps/board/) and see if there is an option for that.

[jscheuer1]

There is no iframe. I'd just make the object a little wider, say 540, and use these styles for the logo:


#logo-container {
margin: 0px auto;
height: 50px;
left: -7px;
position: relative;
top: 90px;
width: 492px;
}

You will also need to add a br to the logo-container:


<div id="logo-container">
<img src="images/logo.png" alt="">
<br>
<input type="reset" value="About Us" id="about">
<input type="reset" value="Intructions" id="instructions">
<input type="reset" value="Reset" id="reset">
</div>