Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: Messed up in IE

  1. #1
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,560
    Thanks
    76
    Thanked 105 Times in 104 Posts

    Messed up in IE

    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

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    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.

  • #3
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,560
    Thanks
    76
    Thanked 105 Times in 104 Posts
    So just add a float:left to the #page div?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Try it this way masterofollies -
    Code:
    /* Page */
    
    #page {
    	width: 830px;
    	margin: 0 auto;
    }
    
    /* Content */
    
    #content {
    Code:
    <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.
    Last edited by Excavator; 05-09-2010 at 02:27 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,560
    Thanks
    76
    Thanked 105 Times in 104 Posts
    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.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by myfayt View Post
    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 -
    Code:
    /* Page */
    
    #page {
    	width: 830px;
    	margin: 0 auto;
    }
    
    /* Content */
    
    
    
    #content {
    /* float: right;
    	width: 600px;*/
    margin: 0 0 0 230px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,560
    Thanks
    76
    Thanked 105 Times in 104 Posts
    Same in FF, the sidebar is at the top, the middle content is below it way down the page.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by myfayt View Post
    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...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    myfayt (05-10-2010)

  • #9
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,560
    Thanks
    76
    Thanked 105 Times in 104 Posts
    It's magically fixed! I forgot to include #page in the last update. Thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •