SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Toowoomba
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer Trouble - 3column CSS Layout

    Hi all,

    Sorry if this question is answered elsewhere, I have been trolling trough this forum for hours and found lots of great stuff but I can't seem to fix the problems below:

    I have created a 3 column layout (wish i'd used Paul's now ) but I can't seem to get the height right:

    IE6: (non-quirks mode) the height is 100% of the view port plus the height of the header div. - Yuk

    Mozilla: height looks good but if the content is short the footer is right up underneath the content. -Yuk again

    Code is posted below:
    (please be kind - i'm self taught)

    Code:
    /* <![CDATA[ */
    
    /*	body {
    		margin:0; padding:0;
    		font:11pt/1.5 sans-serif;
    		}*/
    a,p,li,h3,table,body
    {
    font: 12px verdana, arial, 'sans serif'; 
    }
    html, body {height: 100%;}
    
    body {
    	text-align:center;
    	/*min-width:760px;*/
    	line-height:100%;
    	/* \*/
    	/*background:url(images/back.gif) repeat-y #FFF left top;*/
    	color: #000000;
    	margin: 0;
    	padding: 0;
    	background-color: #edf3cb;
    }
    	#expander {
    		float: left;
    		width: 1px;
    		height: 100%;
    		background-color: red;
    		min-height: 100%;
    		}
    	#container {
    		z-index: 12;
    		width:760px;
    		margin:0; padding:0;
    		background-color: white;
    		margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; /* For Moz */
    		background-image: url(../images/bodyback.gif);
    		background-repeat: repeat-y;
    		height:100%;
    		min-height:100%;
    		}
    html>body #container {height: auto;}	
    	#intro {
    		display: none;
    		z-index: 1;
    		color: black;
    		position: absolute;
    		top: 30px;
    		left: 200px;
    		width: 300px;
    		background-color: red;
    	}
    	#header {
    		z-index: 10;
    		margin:0; 
    		padding:0;
    		background-image: url(../images/bantop.jpg);
    		text-align: left;
    		width: 100%;
    		height: 138px;
    		/*position: fixed;*/
    		}
    		#logot {
    			display: none;
    			margin:0; padding:0;
    			background-image: url(../images/logol.gif);
    			width: 134px;
    			height: 52px;
    			z-index: 30;
    			float: left;
    		}
    		#transrgt
    		{
    			display: none;
    			/*background-image: url(images/transleft.gif);*/
    		}
    		#transleft
    		{
    			display: none;
    		}
    		#transtop
    		{
    			display: none;
    		}
    		#transbot
    		{
    			display: none;
    			/*background-image: url(images/transbot.gif);*/
    		}
    		#logom {
    			display: none;
    			margin:0; padding:0;
    			background-image: url(../images/middle.gif);
    			width: 116px;
    			height: 89px;
    			z-index: 50;
    		margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; /* For Moz */
    		}
    		#logor {
    			display: none;
    			margin:0; padding:0;
    			background-image: url(../images/logor.gif);
    			width: 92px;
    			height: 52px;
    			z-index: 30;
    			float: right;
    		}
    	#main1 {
    		margin:0; padding:0;
    		z-index: 12;
    		height:100%;
    		min-height:100%;
    		}
    html>body container #main1{height: auto;}		
    	#main2 {
    		margin:0; padding:0;
    		background:url("blue.gif") top right repeat-y;
    		height:100%;
    		min-height:100%;
    		}
    	#left {
    		float:left;
    		background-image: url(../images/banlft.gif);
    		background-repeat: repeat-y;
    		width:0px;
    		margin:30; 
    		padding:0;
    		font-size:80%;
    		}
    	#right {
    		float:right;
    		width:0px;
    		margin:30; padding:0;
    		font-size:80%;
    		}
    	#middle {
    		margin:0px 30px 0px 30px; /* top right bottom left */
    		font-size:80%;
    		padding: 0;
    		height:100%;
    		min-height:100%;
    		}
    	#mccont {
    		padding:0px 0px 0px 3px;
    		text-align: left;
    		height:100%;
    		min-height:100%;
    	}
    /* Fix IE. Hide from IE Mac \*/
    * html #mccont ul li { float: none;  }
    * html #mccont ul li a { }
    /* End */
    
    #mccont li {
    		list-style-type: disc;
    	}
    
    	#mccont ul {
    		list-style-type: disc;
    	}
    		* html #mccont { margin-top: 0; }
    	.column-in {
    		margin:0px;
    		padding:0px;
    		}
    	.cleaner {
    		clear:both;
    		height:1px;
    		font-size:1px;
    		border:none;
    		margin:0; padding:0;
    		background:transparent;
    		}
    	/* * html .cleaner{display:none}  STOPS CLEANER FROR IE */
    	h1,h2,h3,h4 { margin: 0.2em 0 }
    	p { margin: 0em 0 }
    	a { color:black }
    	
    	.copy { text-align:center; font-size:80% }
    	
    		#menu
    		{	position: relative;
    			margin: 0;
    			padding: 0;
    			left: 0px;
    			top: 65px;
    			font-size: 90%;
    			text-align: center;
    			z-index: 99;
    		}/* first line of hack is border + margin? +padding for IE5x, the bottom line is the actual width */
    		#menu
    		{
    			width: 100%; 
    			voice-family: "\"}\""; 
    			voice-family:inherit;
    			width:100%;
    		}
    		/* Be nice to opera - should be the same as IE6-moz value above*/
    		html>body #menu
    		{
    			width:100%;
    		}
    		
    		#footer
    		{	clear:both;
    			background-image: url(../images/banbot.gif);
    			text-align: center;
    			color:#fee900;
    			height: 26px;
    		}
    /* ]]> */
    Please let me know if this is enough/too much, any help would be greatly appreciated.

    Cheers,

    Therese

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,529
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I will need the html as well to see how you are placing all that css.

    If you look in the FAQ thread you will see two posts that will help you understand the 100% height and footer techniques.

    Basically 100% is 100% and that means that if you place it under your header then it is 100% from where it starts. Which is why in my demos the headers are absolutely placed so that they take up no space and the 100% starts at the top of the window. (I have worked out a way to have fluid headers in my demos but thats another question).

    If you post your html then I'll see if I can give you some pointers and aim you in the right direction

    Paul


Bookmarks

Posting Permissions

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