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/ind...e__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>