SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: gap between content and footer

Hybrid View

  1. Sep 29, 2004 17:36 #1
    bradles
    bradles is offline
    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. Sep 29, 2004 17:39 #2
    bradles
    bradles is offline
    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.
« Previous Thread | Next Thread »

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
  •  

Forum Rules