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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Skinny Column in IE

    Hi All,
    I'm having trouble getting this to work in IE6. It looks fine in Firefox but in IE, it adds these margins to the right column and I don't know where they're coming from. Any help is appreciated.

    The HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Test</title>
    <link rel="stylesheet" type="text/css" href="Nicamade_files/stylesheet.css"></head><body>
    <div id="container">
    <!-- header //-->
    	<div id="header">
                Curabitur purus. Cras eu elit a lacus vestibulum dictum. Etiam eu sem. Donec adipiscing purus ac nunc. Vivamus auctor, magna vitae interdum accumsan, neque libero egestas nibh, quis imperdiet ipsum urna at purus. Sed scelerisque velit non arcu. Cras lacus risus, tincidunt vitae, iaculis tincidunt. <br clear="all">
    	</div>
    <!-- header_eof //-->
    
    <!-- body //-->
    	<!-- left_navigation //-->
    		<div id="left_column">
                Curabitur purus. Cras eu elit a lacus vestibulum dictum. Etiam eu sem.
                Donec adipiscing purus ac nunc. Vivamus auctor, magna vitae interdum accumsan, neque
                libero egestas nibh, quis imperdiet ipsum urna at purus. Sed scelerisque velit non arcu. 
    		</div>
    	<!-- left_navigation_eof //-->
    
    	<!-- body_text //-->
    		<div id="body_text">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin ornare. In condimentum, diam quis egestas ullamcorper, nulla odio hendrerit odio, a molestie elit mauris sit amet augue. Phasellus at purus ac nibh blandit consequat. Mauris est leo, pharetra ut, vulputate vel, faucibus non, dui. Quisque in enim. Aenean mollis mollis enim. Nulla tempor. Sed rhoncus congue nulla. Suspendisse dolor erat, ultricies vel, facilisis et, ullamcorper sit amet, nibh. Nullam iaculis velit in pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam sit amet est. Vestibulum cursus neque sed ante. Phasellus aliquet tincidunt lacus. Nulla eu nisi. Nunc dictum, libero ut tincidunt gravida, ligula pede varius lectus, sed elementum erat justo quis nisl. Nullam imperdiet nisi quis turpis. Morbi augue turpis, gravida a, tempor vitae, mattis nec, enim. Aenean placerat enim eget tellus.
                <br />
            </div>
    	<!-- body_text_eof //-->
    
    	<!-- right_navigation //-->
    		<div id="right_column">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin ornare. In condimentum, diam quis egestas ullamcorper, nulla odio hendrerit odio, a molestie elit mauris sit amet augue. Phasellus at purus ac nibh blandit consequat. Mauris est leo, pharetra ut, vulputate vel, faucibus non, dui. Quisque in enim. Aenean mollis mollis enim. Nulla tempor. Sed rhoncus congue nulla. Suspendisse dolor erat, ultricies vel, facilisis et, ullamcorper sit amet, nibh. Nullam iaculis velit in pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam sit amet est. Vestibulum cursus neque sed ante. 
    		</div>
    		<br clear="all">
    	<!-- right_navigation_eof //-->
    <!-- body_eof //-->
    
    </div>
    <br clear="all">
    </body></html>
    The CSS:
    Code:
    BODY {
      background: #F5EEBC;
      color: #000000;
      margin: 0px;
      padding: 0px;
      text-align: center;
    }
    
    #container {
    	width: 778px;
    	margin: 0px auto 0px auto;
    	padding-right: 5px;
    	padding-left: 5px;
    	text-align: left;
    }
    
    #header {
    	width: 778px;
    	height: 134px;
    	padding: 0px;
    	margin: 0px;
        background-color: Gray;
    }
    
    #left_column {
    	float: left;
    	width: 175px;
    	margin: 0px;
    	padding: 0px;
    	background-color: #cee4f0;
    }
    
    #right_column {
    	float: right;
    	width: 150px;
    	margin: 0px;
    	padding: 0px;
    	background-color: #ede5c5;
    }
    
    #body_text {
    	width: 433px;
    	padding: 10px;
    	float: left;
    	background-color: white;
    }

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    This comes from you not using a full doctype. Currently you have a partial doctype. Change this
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    to this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    That should fix that problem but now its created another one. You should see the word ante off to the left. This is due to comments in between two floated elements. To fix this you can either start removing comments until its gone add position:relative; to #right_column. Along your journey to code for IE you will soon find out that position:relative can sometimes be a simple fix and sometimes it can cause more harm to the document than it can fix the document.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, AE, that worked great. I didn't get the new problem you mentioned but I'll know what caused it if it does show up.


  •  

    Posting Permissions

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