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

    CSS layout problems

    Hey all,

    Im at my wit's end with this page have spent hours trying to fix it to work properly in firefox/opera but have little experience in CSS. If anyone could help me correct that code that is forcing the 'main' below the linklist and the footer not below everything i would be much obliged and much less stressed !

    Code:
    <style type="text/css">
    	body {
    		padding:0px;
    		margin:0px;
    		font-size: 12px;
    		font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;
    		color:  #3f3f3f;
    		
    	}
    	
    	p {
    		text-align: left;
    		margin-left: 15px;
    		margin-right: 15px;
    		
    	} 
    	
    	
    	
    	#wrapper {
    		width:750px;
    		margin:0 auto 0 auto;
    		background-color:#333333;
    	}
    	
    	#notepad {
    		width:700px;
    		background-color:#DEDEDE;
    		height:100%;
    		margin:0 25px 0 25px;
    	}
    	
    	#header {
    		height:300px;
    		background-image: url(Header.jpg)
    	}
    	
    	#main_menu {		
    	background-color:#DEDEDE;
    		
    	}
    	
    	#content {
    		background-color:#DEDEDE;
    		position:relative;
    		
    	}
    	
    	#main {
    		background-color:#DEDEDE;
    		float:right;	
    	}
    	
    	#left_column {
    		width:200px;
    		float:left;
    		background-color:#DEDEDE;
    	}
    	
    	#linkList{
    	top: 0px;
    	padding-left: 10px;
    	color: #3f3f3f;
    	float:left;
    	width: 197px;
                 }
    	
    	
    	#footer{
    	display: block;	
    	text-align: center;
    	font-size: 10px;
    	background: #333333; 
    	}
    
                 li a{
    	color: #000000;
    	display: block;
    	font-weight: bold;
    	font-size: 11px;
    	text-transform: none;
    	padding: 2px 0 3px 0;
    	}
    
    	li a.c{
    	font-size: 9px;
    	font-weight: normal;
    	display: inline;
    	padding: 0;
    	text-transform: uppercase;
    	}
    
    
    
    	ul,li{
    	list-style: none;
    	padding: 0;
    	margin: 0;
    	}
    
    	li{
    	color: #dedede;
    	background: #3f3f3f;
    	padding: 5px 7px;
    	border-bottom: 1px solid #dedede; 
    	text-transform: uppercase; 
    	font-size: 9px;
    	}
    
    	li:hover{
    	background: #7D7D7D; 
    	}
    	
    
    	
    </style>
    </head>
    
    <body>
    <div id="wrapper">
    	<div id="notepad">
    		<div id="header">
    			Header...
    		</div>
    			
    		<div id="main_menu">
    		             Homepage > You are here
    		</div>
    			
    		<div id="content">
    				
    		             <div id="left_column">
    			<div id="linkList">
    			<ul>
    			<li><a href=>Home</a> </li>
    			<li><a href=>Wombat</a></li>
    			<li><a href=>Numbat</a></li>
    			<li><a href=>Koala</a></li>
    			<li><a href=>Kangaroo</a></li>					
    			</ul>
    					
    			 </div>
    				
    			</div>
    
    		<div id="main">
    			<p>Lorem .</p>
    					
    		</div>
    				
    		</div>
    						
    		</div>
    		<div id="footer">
    			footer...
    	             </div>
    </div>
    </body>
    
    </html>
    Here is what it should look like and does in IE:



    Here is what is happening in other browsers"




    Thanks for the help

    Ben

  • #2
    New to the CF scene
    Join Date
    Oct 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here ya go Ben. I updated a few CSS entries and commented them as I went. Tested this on FF 1.5 and IE 6 and they render the same.

    Hope this is helpful...

    <style type="text/css">
    body
    {
    padding:0px;
    margin:0px;
    font-size: 12px;
    font-family: Lucida Grande, Lucida Sans Unicode, Tahoma, Verdana, Arial, sans-serif;
    color: #3f3f3f;
    }

    p
    {
    text-align: left;
    margin-left: 15px;
    margin-right: 15px;
    }

    #wrapper
    {
    width:750px;
    /*removed for testing */
    /*margin:0 auto 0 auto;*/

    /*added for testing */
    margin:0px;

    background-color:#333333;

    /*added for testing */
    height:100%;
    }

    #notepad
    {
    width:700px;
    background-color:#DEDEDE;
    height:100%;
    margin:0 25px 0 25px;
    }

    #header
    {
    height:300px;
    background-image: url(Header.jpg);
    /*added for testing */
    border: 1px solid black;
    }

    #main_menu
    {
    background-color:#DEDEDE;
    }

    #content
    {
    background-color:#DEDEDE;
    position:relative;
    }

    #main
    {
    background-color:#DEDEDE;
    float:right;
    /*added for testing*/
    width: 500px;
    }

    #left_column
    {
    width:200px;
    float:left;
    background-color:#DEDEDE;
    }

    #linkList
    {
    top: 0px;
    padding-left: 10px;
    color: #3f3f3f;
    float:left;
    width: 197px;
    }


    #footer
    {
    display: block;
    text-align: center;
    font-size: 10px;
    background: #333333;
    }

    li a
    {
    color: #000000;
    display: block;
    font-weight: bold;
    font-size: 11px;
    text-transform: none;
    padding: 2px 0 3px 0;
    }

    li a.c
    {
    font-size: 9px;
    font-weight: normal;
    display: inline;
    padding: 0;
    text-transform: uppercase;
    }

    ul,li
    {
    list-style: none;
    padding: 0;
    margin: 0;
    }

    li
    {
    color: #dedede;
    background: #3f3f3f;
    padding: 5px 7px;
    border-bottom: 1px solid #dedede;
    text-transform: uppercase;
    font-size: 9px;
    }

    li:hover
    {
    background: #7D7D7D;
    }
    </style>
    </head>

    <body>
    <div id="wrapper">
    <div id="notepad">
    <div id="header">
    Header...
    </div>

    <div id="main_menu">
    Homepage > You are here
    </div>

    <div id="content">
    <div id="left_column">
    <div id="linkList">
    <ul>
    <li><a href=>Home</a> </li>
    <li><a href=>Wombat</a></li>
    <li><a href=>Numbat</a></li>
    <li><a href=>Koala</a></li>
    <li><a href=>Kangaroo</a></li>
    </ul>
    </div>
    </div>

    <div id="main">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed sagittis blandit magna. Vestibulum tellus quam, egestas non, vehicula a, lacinia vitae, tortor. Nulla rutrum. Integer tortor arcu, congue ac, semper a, luctus in, enim. Sed id tellus sed est vehicula imperdiet. Praesent turpis urna, interdum eget, malesuada congue, mattis sit amet, erat. Fusce mattis, enim vitae porta vestibulum, dolor risus ultricies purus, at auctor elit turpis sed elit. Nullam mattis sodales lacus. Donec eros turpis, lobortis ut, ornare ac, aliquam in, lacus. Integer accumsan augue ut magna. Cras mollis mi. Integer in metus non justo congue pulvinar. Sed eleifend molestie orci. Vestibulum quis sapien quis tortor semper tristique. Vestibulum egestas euismod massa. Aliquam vulputate. Morbi porta.</p>
    <p>Integer congue consectetuer urna. Aenean aliquet auctor tortor. Nam aliquet, tellus feugiat gravida venenatis, est lectus tincidunt orci, ut imperdiet purus mauris quis est. Nunc bibendum nibh ut nisi. Nullam ligula. Aliquam erat volutpat. Proin consectetuer pharetra tortor. Duis malesuada arcu sed lacus malesuada semper. Suspendisse potenti. Phasellus luctus felis vel mi. Ut a leo vitae dolor ultricies condimentum. Proin ac dui. Integer dignissim tellus suscipit ante. Nulla tempor accumsan est. Morbi molestie urna sit amet enim. In volutpat ligula malesuada risus. In vel purus. Phasellus aliquet mollis tortor. Cras dictum eleifend turpis. Aliquam metus ipsum, tempus a, gravida sed, lobortis sit amet, turpis.</p>
    <p>Nunc neque. Etiam ut dolor eget nulla rutrum euismod. Suspendisse quam justo, tempor sed, malesuada eget, pellentesque in, risus. Curabitur pharetra elit et sapien. Nulla lorem odio, sagittis pulvinar, laoreet eu, dapibus at, velit. Vivamus faucibus rutrum ante. Ut porttitor nonummy velit. Maecenas a neque ut ante feugiat dignissim. Maecenas est. Praesent convallis leo non mi. Fusce ac neque nec risus aliquam ullamcorper. Nulla lacinia fermentum ipsum. Aenean dapibus. Aliquam nec orci scelerisque nulla dignissim malesuada. </p>
    </div>
    </div>
    </div>
    <div id="footer">
    footer...
    </div>
    </div>
    </body>

    </html>


  •  

    Posting Permissions

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