SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Australia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    gap between content and footer

    Hi All,

    I can't figure out why my content has a 1 pixel or so gap between my #leftpanel div and the footer.

    I set the #outer to a min-height of 600px rather than 100%. The header is 100px, the navbar 30px and the footer is 50px...180px in total. That means that there should be 600px - 180px = 420px leftover for the content. However, when I put my #leftpanel div in with a min-height of 420px I still end up with a pixel or two gap between it and the footer. I have racked my brain for ages trying to figure this one out and still cannot solve it.

    Can anyone see what I am not seeing here?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    /* CSS Document */
    /* commented backslash hack v2 \*/ 
    html, body {height:100%;} 
    /* end hack */
    
    body {
    padding:0;
    margin:0;
    text-align: center; /*Center the outer div*/
    color: #000000;
    }
    
    #outer {
    min-height: 600px; /* for mozilla*/
    width: 760px;
    background: #FFF;
    margin: 10px auto -50px auto; /* -50px for bottom margin to allow for footer*/
    border: 1px solid #000;
    text-align:left; /*so outer isn't centered as body is*/
    }
    
    * html #outer{height:100%;}
    
    html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    
    /* -----< START HEADER STYLE >----- */
    #header {
    margin: 0 auto;
    width: 760px;
    height:100px;
    background-image: url(../images/headergrad.jpg);
    background-repeat: repeat-x;
    }
    
    #headerimage {
    float:left;
    width:238px;
    height:100px;
    background-image: url(../images/headerimage.jpg);
    background-repeat: no-repeat;
    }
    
    #companylogo {
    float: left;
    width: 240px;
    height: 30px;
    margin-top: 45px;
    background-image: url(../images/companylogo.jpg);
    background-repeat: no-repeat;
    }
    
    #webaddress {
    float: right;
    width: 173px;
    height: 18px;
    margin-top: 75px;
    background-image: url(../images/webaddress.jpg);
    background-repeat: no-repeat;
    }
    /* -----< END HEADER STYLE >----- */
    
    /* -----< START NAVBAR STYLE >----- */
    #navbar {
    margin: 0 auto;
    width: 760px;
    height:30px;
    background-image: url(../images/navgrad.jpg);
    background-repeat: repeat-x;
    border-top:1px solid #696969;
    border-bottom:1px solid #696969;
    }
    
    #navleftlinks {
    float: left;
    margin: 0px 0px 0px 5px;
    height:30px;
    }
    
    #navrightlinks {
    float: right;
    margin: 0px 5px;
    height:30px;
    }
    
    a.navlink, a.unlinked {
    line-height:28px; /*to ensure that text is centered vertically within the navbar*/
    font-family: arial, verdana;
    font-size: 11px;
    color: #363636;
    font-weight: bold;
    }
    
    a.navlink:link {
    font-family: arial, verdana;
    font-size: 11px;
    color: #363636;
    text-decoration: none;
    font-weight: bold;
    }
    
    a.navlink:visited {
    font-family: arial, verdana;
    font-size: 11px;
    color: #363636;
    text-decoration: none;
    font-weight: bold;
    }
    
    a.navlink:hover {
    font-family: arial, verdana;
    font-size: 11px;
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
    }
    
    a.navlink:active {
    font-family: arial, verdana;
    font-size: 11px;
    text-decoration: none;
    font-weight: bold;
    }
    /* -----< END NAVBAR STYLE >----- */
    
    /* -----< START CONTENT STYLE >----- */
    #leftpanel {
    float:left;
    text-align:left;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    width: 230px;
    min-height: 420px;
    background: #658CA3;
    display:inline; /*ie fix*/
    }
    /* -----< START CONTENT STYLE >----- */
    
    
    /* -----< START FOOTER STYLE >----- */
    #clearfooter {
    clear:both;
    margin: 0px;
    padding: 0px;
    height:50px;}/*needed to make room for footer*/
    
    #footer {
    width:760px;
    clear:both;
    height:50px;
    margin: 0px auto 0px;
    background: #316684;
    border-bottom:1px solid #000;
    border-left:1px solid #000;	/* ensure there is no break in border*/
    border-right:1px solid #000; /* ensure there is no break in border*/
    text-align:center;
    /*position:relative;*/
    }
    
    #footerbreak {
    width:760px;
    height:10px;
    margin: 0px auto 0px;
    background: #FFF;
    }
    
    * html #footer {/*only ie gets this style*/
    \height:52px;/* for ie5 */
    he\ight:50px;/* for ie6 */
    }
    
    a.footer, a.copyright {
    color: #FFF;
    font-family: arial, verdana;
    font-size: 10px;
    color: #FFF;
    line-height:100%;
    }
    
    a.footer:link {
    font-family: arial, verdana;
    font-size: 11px;
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
    }
    
    a.footer:visited {
    font-family: arial, verdana;
    font-size: 11px;
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
    }
    
    a.footer:hover {
    font-family: arial, verdana;
    font-size: 11px;
    color: #363636;
    text-decoration: none;
    font-weight: bold;
    }
    
    a.footer:active {
    font-family: arial, verdana;
    font-size: 11px;
    text-decoration: none;
    font-weight: bold;
    }
    /* -----< END FOOTER STYLE >----- */
    </style>
    </head>
    
    <body>
    <!-- Start outer div -->
    <div id="outer">
    	<div id="header">
    		<div id="headerimage"></div>
    		<div id="companylogo"></div>
    		<div id="webaddress"></div>
    	</div>
    	
    	<div id="navbar">
    		<div id="navleftlinks">
    			<a class="navlink" href="index.php">Home</a> <a class="navlink">|</a>
    			<a class="navlink" href="weddings.php">Weddings</a> <a class="navlink">|</a>
    			<a class="navlink" href="portraits.php">Portraits</a> <a class="navlink">|</a>
    			<a class="navlink" href="dogs.php">Dogs</a> <a class="navlink">|</a>
    			<a class="navlink" href="contact.php">Contact</a>
    		</div>
    		
    		<div id="navrightlinks">
    			<a class="unlinked">Login</a> <a class="navlink">|</a>
    			<a class="navlink" href="feedback.php">Feedback</a>
    		</div>
    	</div>
    	
    	<div id="leftpanel">
    		Left Panel
    	</div>
    	
    	<div id="clearfooter"></div>
    </div> <!-- End outer div -->
    
    <div id="footer">
    	<a class="footer" href="#">Home</a> <a class="footer">|</a>
    	<a class="footer" href="#">Weddings</a> <a class="footer">|</a>
    	<a class="footer" href="#">Portraits</a> <a class="footer">|</a>
    	<a class="footer" href="#">Dogs</a> <a class="footer">|</a>
    	<a class="footer" href="#">Contact</a> <a class="footer">|</a>
    	<a class="footer" href="#">Login</a> <a class="footer">|</a>
    	<a class="footer" href="#">Feedback</a>
    	<br>
    	<a class="copyright"> 1999-2004 Printed Visions. All Rights Reserved.</a>
    </div>
    
    <div id="footerbreak"></div> <!-- Add space between bottom and browser. -->
    
    </body>
    </html>
    Brad.

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    Australia
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never mind. I think I solved it.

    The footer was set to 50px and the clearfooter was set to 50px. I think there may have been a 1px border somewhere influencing this so I just made the clearfooter 49px and it solved my problem.

    Thanks for reading/listening anyway.

    Brad.


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
  •