PDA

View Full Version : Messed up in IE



myfayt
May 6th, 2010, 08:03 PM
The alignment looks great in FF but in IE it's messed up. The left links in IE are dropped to the bottom and not side by side with the content on the right. Any ideas on a fix?

http://www.rodgame.org/projects/631/bmx.html

Scriptet
May 6th, 2010, 08:40 PM
It's because you have your #page DIV just around your content, and this isn't being floated or anything..so this needs to be floated either left or right, or wrapped around both the content and sidebar (then it's width may need to be adjusted) depends on its purpose really.

myfayt
May 8th, 2010, 05:04 PM
So just add a float:left to the #page div?

Excavator
May 8th, 2010, 07:29 PM
Try it this way masterofollies -
/* Page */

#page {
width: 830px;
margin: 0 auto;
}

/* Content */

#content {



<div id="wrapper">
<!-- start header -->
<div id="header">
<h1>631 C.O.M.P.O.U.N.D</h1>
<p>More secret than Area 51</p>
</div>

<div id="page"><div id="sidebar">
<ul>
<li>
<h2>Categories</h2>
<ul>
<li><a href="bmx.html">Home</a></li>
<li><a href="index.html">Secret Compound</a></li>
<li><a href="index.html">Contact Us</a></li>

</ul>
</li>
<li>
<h2>Riders</h2>
<ul>
<li><a href="matt.html">Matt Thorne</a> (Am)</li>
<li><a href="#">John Doe</a> (Am)</li>
<li><a href="#">John Doe</a> (Am)</li>
<li><a href="#">John Doe</a> (Flow)</li>

</ul>
</li>
</ul>
</div>

<div id="content">
<div class="post">
<h1 class="title">The 411 on the Compound</h1>
<br>
Nested in the woods of Charlottesville lies a compound surrounded by fences and traps, which has some of the
most badass bmx ramps, rails, and jumps ever seen. Access to this compound is by invite, only the elite
may enter.<br><br>
<img src="images/park.jpg">

</div>

</div>
</div>



</div>

<div id="footer">
<center>
<b><i>Copyright 2010 631 Compound</i></b>
</center>
</div>


Check that code in the validator too, some things there need fixed.

myfayt
May 8th, 2010, 10:28 PM
Just tried your coding, this time the content on the right drops down and the sidebar is up at the top. Thats the results in FF.

Excavator
May 9th, 2010, 02:23 AM
Just tried your coding, this time the content on the right drops down and the sidebar is up at the top. Thats the results in FF.

Oops, add the bit I missed... highlighted in red -
/* Page */

#page {
width: 830px;
margin: 0 auto;
}

/* Content */



#content {
/* float: right;
width: 600px;*/
margin: 0 0 0 230px;
}

myfayt
May 9th, 2010, 03:16 AM
Same in FF, the sidebar is at the top, the middle content is below it way down the page.

Excavator
May 9th, 2010, 03:23 AM
Same in FF, the sidebar is at the top, the middle content is below it way down the page.

Update your online version to what you have right now, you've missed something...

myfayt
May 10th, 2010, 02:55 AM
It's magically fixed! I forgot to include #page in the last update. Thanks! :thumbsup: