SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Member wza's Avatar
    Join Date
    Jan 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Problem with wrapper height

    Hi, I have a problem with a css site i'm trying to make.

    Check an example here.

    I seem to have a problem pushing the footer to the bottom of the page, when all the content ends, but only with Firefox. Internet Explorer 6 seems to be handling it ok.
    I've put color borders around the mainwrapper (100&#37, the wrapper (to center all content with) and the contentcontainer. Here are the css entries for those:

    Code:
    #mainwrapper {
        width: 100%;
        text-align: left;
        margin: auto;
        padding: 0px;
        min-height: 100%;
    	height:auto !important; /* voor moderne browsers */
    	height:100%; /* voor IE */
    	border: 1px solid #FFFF00;
    }
    #wrapper {
    	width:850px;
    	margin:auto;
    	border: 1px solid #FFFFFF;
    	height: auto;
        position: relative;
        height:100%;
    }
    #contentcontainer {
    	width:850px;
    	border: 1px solid #00FF00;
    	margin:-37px auto 40px auto;
    	height: auto;
            position: relative;
            left: 7px;
            height:100%;
    }
    here's the complete css file:

    Code:
    *{margin:0;padding:0;}
    html, body {
    height: 100%; /* héél belangrijk */
    margin: 0px; padding: 0px;
    }
    body,td,th {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	color: #FFFFFF;
    }
    body {background-color:#522439;}
    #mainwrapper {
        width: 100%;
        text-align: left;
        margin: auto;
        padding: 0px;
        min-height: 100%;
    	height:auto !important; /* voor moderne browsers */
    	height:100%; /* voor IE */
    	border: 1px solid #FFFF00;
    }
    #wrapper {
    	width:850px;
    	margin:auto;
    	border: 1px solid #FFFFFF;
    	height: auto;
        position: relative;
        height:100%;
    }
    #leftbar, #rightbar { 
    	width:21px;
    	position:absolute;
    	min-height: 100%;
    	/*height:auto !important;*/ /* voor moderne browsers */
    	/*height:100%;*/ /* voor IE */
    	background-image:url(../img/layout/sidebarbg.gif);
    	top:0px;
    }
    #leftbar {left:0px;}
    #rightbar {right:0px;}
    /*misc*/
    .left {float:left;}
    .right {float:right;}
    .clean { clear: both; }
    #clearing{ width:100%; height:10px;clear:both; }
    /*nav*/
    #navbar {
    	width:100%;
    	height:30px;
    	background-color:#F78A21;
    }
    /*nav*/
    #footerbar {
    	width:100%;
    	height:30px;
    	background-color:#000000;
    	display:block;
    	clear:both;
    	text-align:center;
    	position:relative;
    	bottom: 0px;
    }
    #masthead {
    	top:30px;
    	width:361px;
    	height:132px;
    	background-image:url(../img/layout/header.jpg);
    	margin-left:auto;
    	margin-right:auto;
    }
    #contentcontainer {
    	width:850px;
    	
    	
    	/*clear:both;*/
    	/*display:table;*/
    	border: 1px solid #00FF00;
    	margin:-37px auto 40px auto;
    	/*height:100%;*/
    	height: auto;
        position: relative;
        left: 7px;
        height:100%;
    }
    #datebar {width:850px;}	
    #date_now {
    	width:200px;
    	height:24px;
    	float:left;	
    	clear:both;
    	text-align:left;
    	margin-bottom:20px;
    	display:block;
    }
    #date_next {
    	width:200px;
    	height:24px;
    	float:right;
    	text-align:right;
    	clear:both;	
    	margin-bottom:20px;
    	display:block;
    }
    /*list*/
    #listcontainer {
    	display:block;
    	position:relative;
    	width:850px;
    	padding-top:40px;
    	clear:both;
    	margin-bottom:30px;
    	float:left;
    }
    .listblock_left {
    	width:415px; 
    	height:20px;
    	float:left;
    	display:block;
    }
    .listblock_right {
    	width:415px; 
    	height:20px;
    	float:right;
    	display:block;
    }
    
    .listtop {
    	background-image:url(../img/layout/list_top.gif);
    	background-position:bottom;
    	background-repeat:no-repeat;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 18px;
    	font-weight: bold;	
    	text-align:left;
    	letter-spacing:-1px;
    	padding-left:7px;
    	padding-bottom:1px;
    	display:block;
    	clear:both;
    	/*background-color:#522439;*/
    }
    .listday {
    	color:#F78A21;
    }
    .listddmm {
    	color:#FFFFFF;
    }
    .listcontent {
    	background-image:url(../img/layout/list_bg.gif);
    	background-repeat:repeat-y;
    	width:415px;
    	min-height:90px;
    	display:table;
    }
    .listcontenttxt{
    	padding-top:1px;
    	width:328px;
    	padding-left:5px;
    }
    .listcontent h1, .listcontent h1 a {
    	color:#5A2839;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size: 22px;
    	letter-spacing:-2px;
    	font-weight:bold;
    	text-transform: uppercase;
    	line-height: 19px;
    	text-decoration:none;
    }
    .listcontent h1 a:hover{color:#9C657B;}
    .listcontent h2, .listcontent h3 {
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	letter-spacing:-1px;
    	font-weight:bold;
    }
    .listcontent h2 {
    	margin-bottom:1px;
    	margin-top:3px;
    	background-color:#F78A21;
    	display:block;
    	padding:1px;
    	color:#FFFFFF;
    }
    .listcontent h3 {
    	margin-bottom:2px;
    	margin-top:4px;
    	color:#9C657B;
    	font-size:11px;
    	
    }
    .listpic {
    	float:right;
    	background-image:url(../img/layout/list_picbg.gif);
    	width:79px;
    	height:71px;
    }
    .listpic img {
    	width:57px;
    	height:56px;
    	margin-top:-3px;
    	margin-left:5px;
    }
    .listbottom {
    	background-image:url(../img/layout/list_bottom.gif);
    	background-repeat:no-repeat;
    	width:415px;
    	height:8px;
    	clear:both;
    }
    Anyone able to help me out?? tx
    Last edited by wza; Jan 4, 2007 at 20:07. Reason: add css file


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
  •