SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centered Footer issues

    Hi all, I'm working on a two column, fixed width header + content + footer layout, and I've run into an issue. This is the site:
    http://ramsaystudios.ca/clients/htbc/

    The footer is not staying under the content when the window is resized smaller vertically, the footer overlaps the content then. It should stay under the content and enable the viewport scrolling when the window is resized to that point.

    The other issue is centering the footer, I seem to be having trouble with this. It works when the footer is 100%, but not a centered fixed width. What am I missing? Again I'm going on Paul's faq's and examples.

    I'm peeking at Paul's example here to try and figure out the footer problem:
    http://www.pmob.co.uk/temp/2colcentred_contentfirst.htm

    Thanks for any help!

    -G
    Personal Portfolio
    Paul O'B is the CSS god

  2. #2
    Ding Fries are Done! inter4design's Avatar
    Join Date
    Mar 2003
    Location
    usa
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try this out, the changes i made were in the #container and the #footer id's.

    Code:
     /* ---------- Page Head and Body ---------- */
     /* Commented Backslash hack for IE5 Mac \*/ 
     html, body {
     	height: 100%;
     	/* End hack */
     } 
     html, body {
     	border: 0;
     	margin: 0;
     	padding: 0;
     }
     body {
     	background: #663300 url(../media/bg.gif) repeat-x;
     	color: #FFFFFF;
     }
     /* IE "hasLayout" Holly Hack, w/ commented Backslash hack for IE5 Mac \*/ 
     * html #navigation, #header {
     	height: 1%;
     	/* End hack */
     }
     h1, h2, h3, h4, h5, h6 { 
     	border: 0;
     	color: #800000;
     	font-family: Verdana, Arial, Helvetica, sans-serif;
     	margin: 0;
     	padding: 0;
     }
     img {
     	border: 0;
     }
     
     /* ---------- Anchor links ---------- */
     a:link, a:visited, a:active {
     	color: #cc0000;
     	font-weight: bold;
     	text-decoration: none;
     }
     a:hover {
     	color: #cc0000;
     	font-weight: bold;
     	text-decoration: underline;
     }
     
     /* ---------- Layout ---------- */
     #container {
     	background: #eee3d3;
     	height: auto;
     	margin: 0 auto;
     	min-height: 100%;
     	width: 768px;
     position: relative;
     }
     * html #container {
     	height: 100%;
     }
     #footer {
     	background: #eee3d3 url(../media/footerBG.gif) repeat-x;
     	clear: both;
     	height: 44px;
     	padding: 12px 0 0 0;
     	text-align: center;
     	width: 768px;
     margin: 0 auto;
     }
     * html #footer{margin-bottom:-1px}/* ie rounding bug*/
     #header {
     	background: #eee3d3 url(../media/headerBG.gif) repeat-x;
     	height: 120px;
     	margin: 0;
     	padding: 12px 0 0 0;
     	width: 768px;
     }
     #header img {
     	float: left;
     	margin: 6px 0 0 12px;
     }
     #header p {
     	color: #774d2d;
     	font: 0.65em Verdana, Arial, Helvetica, sans-serif;
     	text-align: right;
     	margin: 18px 12px 0 0;
     }
     #header span {
     	color: #774d2d;
     	font: bold 1.25em Verdana, Arial, Helvetica, sans-serif;
     	text-align: right;
     }
     #header .edition {
     	margin: 10px 12px 0 0;
     	color: #cc0000;
     }
     #leftSide {
     	background: url(../media/navigation_rightSide.gif) repeat-y top right;
     	float: left;
     	margin: 18px 0 0 0;
     	padding: 0;
     	position: relative;
     	width: 211px;
     }
     /* Float drop fix for IE */
     * html #leftSide{
     	margin: 0 -211px 0 0;
     }
     #rightSide {
     	float: right;
     	margin: 0;
     	padding: 0;
     	width: 557px;
     }
     #sponsors {
     	margin: 38px 0 0 0;
     }
     
     /* ---------- Content ---------- */
     .contentBox {
     	margin: 12px 0 0 0;
     	padding: 0;
     }
     .content_sidebox {
     	margin: 0 0 0 22px;
     	width: 90%;
     	background: url(../media/content_br.gif) no-repeat bottom right;
     	font-size: 100%;
     }
     .content_boxhead {
     	background: url(../media/content_tr.gif) no-repeat top right;
     	margin: 0;
     	padding: 0;
     	text-align: center;
     }
     .content_boxhead h2 {
     	background: url(../media/content_tl.gif) no-repeat top left;
     	color: #774d2d;
     	font: 0.75em bold Verdana, Arial, Helvetica, sans-serif;
     	margin: 0;
     	padding: 6px;
     	text-align: left;
     }
     /* IE "hasLayout" Holly Hack, w/ commented Backslash hack for IE5 Mac \*/ 
     * html .content_boxhead h2 {
     	height: 1%;
     }
     .content_boxbody {
     	background: url(../media/content_bl.gif) no-repeat bottom left;
     	margin: 0;
     	padding: 12px;
     	text-align: left;
     }
     .content_boxbody p { 
     	color: #774d2d;
     	font: 0.85em Verdana, Arial, Helvetica, sans-serif;
     	margin: 0;
     	padding: 0;
     }
     .content_boxbody h3 {
     	color: #774d2d;
     	font: 0.65em bold Verdana, Arial, Helvetica, sans-serif;
     	margin: 12px 0 0 0;
     	padding: 0;
     }
     .content_boxTitle {
     	margin: 8px 0 2px 24px;
     	padding: 0;
     	text-align: left;
     }
     .content_postDate {
     	color: #5c3c23;
     	font: 1.0em Verdana, Arial, Helvetica, sans-serif;
     }
      
     /* ---------- Navigation ---------- */
     #navigation {
     	margin: 18px 0 0 0;
     }
     ul#navMenu {
     	list-style: none;
     	margin: 0;
     	padding: 0;
     }
     ul#navMenu li a:link, ul#navMenu li a:visited {
     	color: #5C3C23;
     	display: block;
     	font: 1.05em Georgia, Times New Roman, Times, serif;
     	margin: 0;
     	padding: 3px 0 3px 29px;
     	text-align: left;
     	text-decoration: none;
     	width: 209px;
     }
     ul#navMenu li a:hover {
     	background: url(../media/navigation_buttonBG.gif) no-repeat;
     	color: #9c653b;
     	margin: 0;
     	padding: 3px 0 3px 29px;
     }
     
     /* ---------- Sponsors ---------- */
     #sponsors .sidebox {
     	margin: 0 auto; /* center for now */
     	width: 172px;
     	background: url(../media/sponsors_br.gif) no-repeat bottom right;
     	font-size: 100%;
     }
     #sponsors .boxhead {
     	background: url(../media/sponsors_tr.gif) no-repeat top right;
     	margin: 0;
     	padding: 0;
     	text-align: center;
     }
     #sponsors .boxhead h2 {
     	background: url(../media/sponsors_tl.gif) no-repeat top left;
     	margin: 0;
     	padding: 6px 0 0 6px;
     }
     /* IE "hasLayout" Holly Hack, w/ commented Backslash hack for IE5 Mac \*/ 
     * html #sponsors .boxhead h2 { 
     	height: 1%;
     }
     #sponsors .boxbody {
     	background: url(../media/sponsors_bl.gif) no-repeat bottom left;
     	font: .65em bold Verdana, Arial, Helvetica, sans-serif;
     	margin: 0;
     	padding: 6px 6px 6px 12px;
     	text-align: left;
     }
     #sponsors .boxbody p { 
     	margin: 0;
     	padding: 0;
     }
     #sponsors .boxTitle {
     	margin: 8px 0 2px 22px;
     	padding: 0;
     	text-align: left;
     }
     
     /* ---------- Footer ---------- */
     .copyright {
     	color: #774d2d;
     	float: right;
     	font: 0.65em Verdana, Arial, Helvetica, sans-serif;
     	margin: 5px 22px 0 0;
     }
     .footerClear {
     	clear: both;
     	height: 44px;
     	width: 100%;
     }
     .links {
     	color: #774d2d;
     	float: left;
     	font: 0.65em Verdana, Arial, Helvetica, sans-serif;
     	margin: 5px 0 0 22px;
     	text-align: left;
     }
     
     /* ---------- Miscellaneous ---------- */
     .divClear {
     	clear: both;
     	height: 1px;
     	overflow: hidden;
     	margin-top: -1px;
     }
    DoesItMatter
    - anyone seen my underwear?

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    position absolute for footer ? See FAQ on 100% height, your footer font is to big, the menu width 209px + 29px padding drops the float

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>Horse Trials British Columbia</title>
    
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
    <meta name="author" content="HTBC" />
    <meta name="copyright" content="COPYRIGHT &copy; 2006 HORSE TRIALS BC. ALL RIGHTS RESERVED." />
    <meta name="description" content="The Official Website for Horse Trials British Columbia" />
    <meta name="keywords" content="horse, eventing, equestrian, british columbia, english, horse trials" />
    
    <script type="text/javascript" src="js/externalLinks.js"></script>
    	<style type="text/css">
    /* ---------- Page Head and Body ---------- */
    /* Commented Backslash hack for IE5 Mac \*/
    *{padding:0;margin:0;} 
    html, body {
    	height: 100%;
    	/* End hack */
    } 
    html, body {
    	border: 0;
    	margin: 0;
    	padding: 0;
    	text-align: center;
    }
    body {
    	background: #663300 url(../media/bg.gif) repeat-x;
    	color: #FFFFFF;
    }
    /* IE "hasLayout" Holly Hack, w/ commented Backslash hack for IE5 Mac \*/ 
    * html #navigation, #header {
    	height: 1%;
    	/* End hack */
    }
    h1, h2, h3, h4, h5, h6 { 
    	border: 0;
    	color: #800000;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	margin: 0;
    	padding: 0;
    }
    img {display:block;
    	border: 0;
    }
    
    /* ---------- Anchor links ---------- */
    a:link, a:visited, a:active {
    	color: #cc0000;
    	font-weight: bold;
    	text-decoration: none;
    }
    a:hover {
    	color: #cc0000;
    	font-weight: bold;
    	text-decoration: underline;
    }
    
    /* ---------- Layout ---------- */
    #container {
    	background: #eee3d3;
    	height: auto;
    	margin: -44px auto 0 auto;
    	min-height:100%;
    	/*position: relative;*/
    	text-align: center;
    	width: 768px;
    }
    * html #container {
    	height: 100%;
    }
    #footer{
    	background: #eee3d3 url(../media/footerBG.gif) repeat-x;
    	height: 31px;
    	margin: 0 auto 0 auto;
    	padding: 12px 0 0 0;
    	/*
    	left: 0;
    	bottom: 0;
    	position: absolute;
    	clear: both;
    	*/
    	text-align:center;
    	width: 768px;
    }
    
    * html #footer{margin-bottom:-1px}/* ie rounding bug*/
    
    #header {
    	background: #eee3d3 url(../media/headerBG.gif) repeat-x;
    	height: 120px;
    	margin:0 0 0 0;
    	padding:0 0 0 0;
    	width:100%;
    	float:left;
    }
    #header img {
    	float: left;
    	margin: 6px 0 0 12px;
    }
    #header p {
    	color: #774d2d;
    	font: 0.65em Verdana, Arial, Helvetica, sans-serif;
    	text-align: right;
    	padding: 18px 12px 0 0;
    }
    #header span {
    	color: #774d2d;
    	font: bold 1.25em Verdana, Arial, Helvetica, sans-serif;
    	text-align: right;
    }
    #header .edition {
    	padding: 10px 12px 0 0;
    	color: #cc0000;
    }
    #leftSide {
    	background: url(../media/navigation_rightSide.gif) repeat-y top right;
    	float: left;
    	margin: 18px 0 0 0;
    	padding: 0;
    	/*osition: relative;*/
    	width: 211px;
    	display:inline;
    }
    /* Float drop fix for IE */
    * html #leftSide{
    	/*margin: 0 0 0 0;*/
    }
    #rightSide {
    	float: right;
    	margin: 0;
    	padding: 0;
    	width: 557px;
    }
    #sponsors {
    	margin: 38px 0 0 0;
    }
    
    /* ---------- Content ---------- */
    .contentBox {
    	margin: 12px 0 0 0;
    	padding: 0;
    }
    .content_sidebox {
    	margin: 0 0 0 22px;
    	width: 90%;
    	background: url(../media/content_br.gif) no-repeat bottom right;
    	font-size: 100%;
    }
    .content_boxhead {
    	background: url(../media/content_tr.gif) no-repeat top right;
    	margin: 0;
    	padding: 0;
    	text-align: center;
    }
    .content_boxhead h2 {
    	background: url(../media/content_tl.gif) no-repeat top left;
    	color: #774d2d;
    	font: 0.75em "bold Verdana", Arial, Helvetica, sans-serif;
    	margin: 0;
    	padding: 6px;
    	text-align: left;
    }
    /* IE "hasLayout" Holly Hack, w/ commented Backslash hack for IE5 Mac \*/ 
    * html .content_boxhead h2 {
    	height: 1%;
    }
    .content_boxbody {
    	background: url(../media/content_bl.gif) no-repeat bottom left;
    	margin: 0;
    	padding: 12px;
    	text-align: left;
    }
    .content_boxbody p { 
    	color: #774d2d;
    	font: 0.85em Verdana, Arial, Helvetica, sans-serif;
    	margin: 0;
    	padding: 0;
    }
    .content_boxbody h3 {
    	color: #774d2d;
    	font: 0.65em "bold Verdana", Arial, Helvetica, sans-serif;
    	margin: 12px 0 0 0;
    	padding: 0;
    }
    .content_boxTitle {
    	margin: 8px 0 2px 24px;
    	padding: 0;
    	text-align: left;
    }
    .content_postDate {
    	color: #5c3c23;
    	font: 1.0em Verdana, Arial, Helvetica, sans-serif;
    }
     
    /* ---------- Navigation ---------- */
    #navigation {
    	margin: 18px 0 0 0;
    }
    ul#navMenu {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    ul#navMenu li a:link, ul#navMenu li a:visited {
    	color: #5C3C23;
    	display: block;
    	font: 1.05em Georgia, "Times New Roman", Times, serif;
    	margin: 0;
    	padding: 3px 0 3px 29px;
    	text-align: left;
    	text-decoration: none;
    	width: 182px;
    }
    ul#navMenu li a:hover {
    	background: url(../media/navigation_buttonBG.gif) no-repeat;
    	color: #9c653b;
    	margin: 0;
    	padding: 3px 0 3px 29px;
    }
    
    /* ---------- Sponsors ---------- */
    #sponsors .sidebox {
    	margin: 0 auto; /* center for now */
    	width: 172px;
    	background: url(../media/sponsors_br.gif) no-repeat bottom right;
    	font-size: 100%;
    }
    #sponsors .boxhead {
    	background: url(../media/sponsors_tr.gif) no-repeat top right;
    	margin: 0;
    	padding: 0;
    	text-align: center;
    }
    #sponsors .boxhead h2 {
    	background: url(../media/sponsors_tl.gif) no-repeat top left;
    	margin: 0;
    	padding: 6px 0 0 6px;
    }
    /* IE "hasLayout" Holly Hack, w/ commented Backslash hack for IE5 Mac \*/ 
    * html #sponsors .boxhead h2 { 
    	height: 1%;
    }
    #sponsors .boxbody {
    	background: url(../media/sponsors_bl.gif) no-repeat bottom left;
    	font: .65em "bold Verdana", Arial, Helvetica, sans-serif;
    	margin: 0;
    	padding: 6px 6px 6px 12px;
    	text-align: left;
    }
    #sponsors .boxbody p { 
    	margin: 0;
    	padding: 0;
    }
    #sponsors .boxTitle {
    	margin: 8px 0 2px 22px;
    	padding: 0;
    	text-align: left;
    }
    
    /* ---------- Footer ---------- */
    .copyright {
    	color: #774d2d;
    	float:right;
    	font: 0.5em Verdana, Arial, Helvetica, sans-serif;
    	margin: 5px 22px 0 0;
    
    }
    .footerClear {
    	clear: both;
    	height: 44px;
    	width: 100%;
    }
    .links {
    	color: #774d2d;
    	float: left;
    	font: 0.5em Verdana, Arial, Helvetica, sans-serif;
    	margin: 5px 0 0 22px;
    	text-align: left;
    
    }
    
    /* ---------- Miscellaneous ---------- */
    .divClear {
    	clear: both;
    	height: 1px;
    	overflow: hidden;
    	margin-top: -1px;
    }
    	</style>
    <link href="css/global.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="container">
    <div class="footerClear"></div>
    	<div id="header">
    	<a href="index-2.html"><img src="media/htbc_logo.jpg" alt="Horse Trials British Columbia logo" /></a>
    	<p>The Official Website of<br /><span>
    	HORSE TRIALS BRITISH COLUMBIA</span></p>
    	<p class="edition">2006 Edition</p>
    </div>	
    <div id="rightSide">
    		<div class="content_boxTitle">
    			<!--  --><h1><img src="media/title_news.gif" alt="Latest News Posts" width="104" height="13" /></h1>
    		</div>
    		<div class="contentBox">
    			<div class="content_sidebox">
    				<div class="content_boxhead">
    					<h2>"ATTENTION EVENT ORGANIZERS" <span class="content_postDate">- Oct.25,2005 3:09 PM PST</span></h2>
    				</div>
    				<div class="content_boxbody">
    					<p>Deadline to submit applications for funding is <strong>February 28, 2006</strong><br />
    					  <a href="http://www.horsetrialsbc.com/funding.htm">Click here for funding forms</a></p>
    					<h3>Elizabeth Stotts</h3>
    				</div>
    			</div>
    		</div>
    		<div class="contentBox">
    			<div class="content_sidebox">
    				<div class="content_boxhead">
    					<h2>"NEED IDEAS FOR CHRISTMAS?" <span class="content_postDate">- Oct.19,2005 8:01 AM PST</span></h2>
    				</div>
    				<div class="content_boxbody">
    					<p>The Young Riders' clothing makes the perfect gift.
    						Sara Willans will be happy to try and accommodate your orders for sweat pants, jodhpurs,
    						golf shirts, hats, etc. in time for Christmas.</p>
    					<p>Contact her at 604-888-8393</p>
    					<h3>Elizabeth Stotts</h3>
    				</div>
    			</div>
    		</div>
    		<div class="contentBox">
    			<div class="content_sidebox">
    				<div class="content_boxhead">
    					<h2>"IMPORTANT" <span class="content_postDate">- Oct.11,2005 8:45 PM PST</span></h2>
    				</div>
    				<div class="content_boxbody">
    					<p>This is very important for our discipline (eventing), so please read;
    						carefully - it only takes a second but will make a huge impact!
    						When renewing your Equine Canada Sport Licenses for your horses, 
    						<strong>MAKE SURE TO CHECK OFF THE EVENTING DISCIPLINE!</strong></p>
    					<br />
    					<p>The total number of people who check off &quot;Eventing&quot; as their discipline
    						makes a difference on how much of the Equine Canada budget goes towards our
    						sport - with bigger numbers we HAVE a bigger voice! Please <em>pass this on to
    						anyone else who may be renewing soon!</em>
    						Eventing Canada Thank You!</p>
    					<br />
    					<p>Lindy Norris, Vice-President Manitoba Horse Trials</p>
    					<h3>Elizabeth Stotts</h3>
    				</div>
    			</div>
    		</div>
    	</div>
    	<div id="leftSide">
    	  
    		<ul id="navMenu">
    	<li><a href="##">Home</a></li>
    	<li><a href="##">Resources</a></li>
    	<li><a href="##">Newsletter</a></li>
    	<li><a href="##">Directors</a></li>
    	<li><a href="##">Young Riders</a></li>
    	<li><a href="##">Gallery</a></li>
    	<li><a href="###">Classifieds</a></li>
    	<li><a href="##">Links</a></li>
    </ul>		<div id="sponsors">
    	<div class="boxTitle"><img src="media/title_sponsors.gif" alt="Our Sponsors" width="76" height="13" /></div>
    	<div class="sidebox">
    		<div class="boxhead"></div>
    		<div class="boxbody">
    			<p><a href="http://www.ramsayequestrian.ca/" rel="external">D&amp;L Equine Services</a></p>
    			<p><a href="http://www.hcbc.ca/" rel="external">Horse Council British Columbia</a></p>
    		</div>
    	</div>
    </div>	</div>
    	
    </div>
    <div id="footer">
    	<div class="links">
    	<a href="##">Home</a> | 
    	 <a href="##">Resources</a> | 
    	<a href="##">Newsletter</a> | 
    	<a href="##">Directors</a> | 
    	<a href="##">Young Riders</a> | 
    	<a href="##">Gallery</a> | 
    	<a href="##">Classifieds</a> | 
    	<a href="##">Links</a></div>
    
    <div class="copyright">COPYRIGHT  2005 HORSE TRIALS BC</div>
    </div>
    </body>
    
    
    </html>

  4. #4
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by inter4design
    try this out, the changes i made were in the #container and the #footer id's.

    Code:
     /* ---------- Page Head and Body ---------- */
     /* Commented Backslash hack for IE5 Mac \*/ 
     html, body {
     	height: 100%;
     	/* End hack */
     } 
     html, body {
     	border: 0;
     	margin: 0;
     	padding: 0;
     }
     body {
     	background: #663300 url(../media/bg.gif) repeat-x;
     	color: #FFFFFF;
     }
     /* IE "hasLayout" Holly Hack, w/ commented Backslash hack for IE5 Mac \*/ 
     * html #navigation, #header {
     	height: 1%;
     	/* End hack */
     }
     h1, h2, h3, h4, h5, h6 { 
     	border: 0;
     	color: #800000;
     	font-family: Verdana, Arial, Helvetica, sans-serif;
     	margin: 0;
     	padding: 0;
     }
     img {
     	border: 0;
     }
     
     /* ---------- Anchor links ---------- */
     a:link, a:visited, a:active {
     	color: #cc0000;
     	font-weight: bold;
     	text-decoration: none;
     }
     a:hover {
     	color: #cc0000;
     	font-weight: bold;
     	text-decoration: underline;
     }
     
     /* ---------- Layout ---------- */
     #container {
     	background: #eee3d3;
     	height: auto;
     	margin: 0 auto;
     	min-height: 100%;
     	width: 768px;
     position: relative;
     }
     * html #container {
     	height: 100%;
     }
     #footer {
     	background: #eee3d3 url(../media/footerBG.gif) repeat-x;
     	clear: both;
     	height: 44px;
     	padding: 12px 0 0 0;
     	text-align: center;
     	width: 768px;
     margin: 0 auto;
     }
     * html #footer{margin-bottom:-1px}/* ie rounding bug*/
     #header {
     	background: #eee3d3 url(../media/headerBG.gif) repeat-x;
     	height: 120px;
     	margin: 0;
     	padding: 12px 0 0 0;
     	width: 768px;
     }
     #header img {
     	float: left;
     	margin: 6px 0 0 12px;
     }
     #header p {
     	color: #774d2d;
     	font: 0.65em Verdana, Arial, Helvetica, sans-serif;
     	text-align: right;
     	margin: 18px 12px 0 0;
     }
     #header span {
     	color: #774d2d;
     	font: bold 1.25em Verdana, Arial, Helvetica, sans-serif;
     	text-align: right;
     }
     #header .edition {
     	margin: 10px 12px 0 0;
     	color: #cc0000;
     }
     #leftSide {
     	background: url(../media/navigation_rightSide.gif) repeat-y top right;
     	float: left;
     	margin: 18px 0 0 0;
     	padding: 0;
     	position: relative;
     	width: 211px;
     }
     /* Float drop fix for IE */
     * html #leftSide{
     	margin: 0 -211px 0 0;
     }
     #rightSide {
     	float: right;
     	margin: 0;
     	padding: 0;
     	width: 557px;
     }
     #sponsors {
     	margin: 38px 0 0 0;
     }
     
     /* ---------- Content ---------- */
     .contentBox {
     	margin: 12px 0 0 0;
     	padding: 0;
     }
     .content_sidebox {
     	margin: 0 0 0 22px;
     	width: 90%;
     	background: url(../media/content_br.gif) no-repeat bottom right;
     	font-size: 100%;
     }
     .content_boxhead {
     	background: url(../media/content_tr.gif) no-repeat top right;
     	margin: 0;
     	padding: 0;
     	text-align: center;
     }
     .content_boxhead h2 {
     	background: url(../media/content_tl.gif) no-repeat top left;
     	color: #774d2d;
     	font: 0.75em bold Verdana, Arial, Helvetica, sans-serif;
     	margin: 0;
     	padding: 6px;
     	text-align: left;
     }
     /* IE "hasLayout" Holly Hack, w/ commented Backslash hack for IE5 Mac \*/ 
     * html .content_boxhead h2 {
     	height: 1%;
     }
     .content_boxbody {
     	background: url(../media/content_bl.gif) no-repeat bottom left;
     	margin: 0;
     	padding: 12px;
     	text-align: left;
     }
     .content_boxbody p { 
     	color: #774d2d;
     	font: 0.85em Verdana, Arial, Helvetica, sans-serif;
     	margin: 0;
     	padding: 0;
     }
     .content_boxbody h3 {
     	color: #774d2d;
     	font: 0.65em bold Verdana, Arial, Helvetica, sans-serif;
     	margin: 12px 0 0 0;
     	padding: 0;
     }
     .content_boxTitle {
     	margin: 8px 0 2px 24px;
     	padding: 0;
     	text-align: left;
     }
     .content_postDate {
     	color: #5c3c23;
     	font: 1.0em Verdana, Arial, Helvetica, sans-serif;
     }
      
     /* ---------- Navigation ---------- */
     #navigation {
     	margin: 18px 0 0 0;
     }
     ul#navMenu {
     	list-style: none;
     	margin: 0;
     	padding: 0;
     }
     ul#navMenu li a:link, ul#navMenu li a:visited {
     	color: #5C3C23;
     	display: block;
     	font: 1.05em Georgia, Times New Roman, Times, serif;
     	margin: 0;
     	padding: 3px 0 3px 29px;
     	text-align: left;
     	text-decoration: none;
     	width: 209px;
     }
     ul#navMenu li a:hover {
     	background: url(../media/navigation_buttonBG.gif) no-repeat;
     	color: #9c653b;
     	margin: 0;
     	padding: 3px 0 3px 29px;
     }
     
     /* ---------- Sponsors ---------- */
     #sponsors .sidebox {
     	margin: 0 auto; /* center for now */
     	width: 172px;
     	background: url(../media/sponsors_br.gif) no-repeat bottom right;
     	font-size: 100%;
     }
     #sponsors .boxhead {
     	background: url(../media/sponsors_tr.gif) no-repeat top right;
     	margin: 0;
     	padding: 0;
     	text-align: center;
     }
     #sponsors .boxhead h2 {
     	background: url(../media/sponsors_tl.gif) no-repeat top left;
     	margin: 0;
     	padding: 6px 0 0 6px;
     }
     /* IE "hasLayout" Holly Hack, w/ commented Backslash hack for IE5 Mac \*/ 
     * html #sponsors .boxhead h2 { 
     	height: 1%;
     }
     #sponsors .boxbody {
     	background: url(../media/sponsors_bl.gif) no-repeat bottom left;
     	font: .65em bold Verdana, Arial, Helvetica, sans-serif;
     	margin: 0;
     	padding: 6px 6px 6px 12px;
     	text-align: left;
     }
     #sponsors .boxbody p { 
     	margin: 0;
     	padding: 0;
     }
     #sponsors .boxTitle {
     	margin: 8px 0 2px 22px;
     	padding: 0;
     	text-align: left;
     }
     
     /* ---------- Footer ---------- */
     .copyright {
     	color: #774d2d;
     	float: right;
     	font: 0.65em Verdana, Arial, Helvetica, sans-serif;
     	margin: 5px 22px 0 0;
     }
     .footerClear {
     	clear: both;
     	height: 44px;
     	width: 100%;
     }
     .links {
     	color: #774d2d;
     	float: left;
     	font: 0.65em Verdana, Arial, Helvetica, sans-serif;
     	margin: 5px 0 0 22px;
     	text-align: left;
     }
     
     /* ---------- Miscellaneous ---------- */
     .divClear {
     	clear: both;
     	height: 1px;
     	overflow: hidden;
     	margin-top: -1px;
     }
    Thanks, I've tried your fixes and they've made a slight improvement, but the footer is now off the page with scrolling ... I'm sure this has something to do with the 100% height issue.

    Quote Originally Posted by all4nerds
    Hello

    position absolute for footer ?
    Yes, absolute positioned footer. From Paul's faq on footers: http://www.sitepoint.com/forums/show...66&postcount=3

    The outer is given a position:relative to create a local stacking context. This allows us to absolutely position the footer at the bottom of the 100% high outer.

    We have to make room for the absolute element so that other content doesn't over-ride it which we can do in the same method as used in the first example (clearfooter).
    Thats what I was trying to accomplish, the only difference between my footer and that example is that mine is a centered fixed-width footer, Paul's is a 100% width footer.

    See FAQ on 100% height
    I'm trying to figure this out now, I have this issue with the header, I need to top padding of 12px on that, but that causes scrolling. I also now have the issue with the footer, as stated above.

    your footer font is to big
    That will be fixed after the rest of the footer issues are solved. I took out the copyright statement for now.

    See FAQ on 100% height, your footer font is to big, the menu width 209px + 29px padding drops the float
    I'm not sure how to push the menu items over to the right without the padding or margins, I need them to be 29px from the left side edge, on all <a> states. But I need the background image to be right where it is now without positioning moves. Is there a way to do this?
    Personal Portfolio
    Paul O'B is the CSS god

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    test my code view it in a browser I mean

  6. #6
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops hehe, I did now. Its much improved, thanks very much. I have a few little niggly issues that I need to fix, one of which I'm not sure how. The header is supposed to be lined up with the red bar in the bg, which means its needs to be moved down 12px ... and the footer is the same, it shouldn't sit right on the bottom edge but rather 5px up from it. Any ideas? Thanks.
    Personal Portfolio
    Paul O'B is the CSS god

  7. #7
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    footer 5px free
    #container {margin: -49px auto 0 auto;

    i use the footerclear as a push box, ad 12px+(5px footer) height

    .footerClear {height: 61px; 44+12+5

    <div id="container">
    <div class="footerClear"></div>

    oho i forgot you have to clear the floats

    head+body #container:after{
    content: ".";
    display: block;
    height:0;
    clear: both;
    visibility: hidden;
    }

  8. #8
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your help all4nerds, I think I've missed one thing though. The background image of the footer still scrolls up and down in Firefox while scrolling, though the content stays underneath the container which is strange. In Internet Explorer it works fine however, what did I miss? Thanks again
    Personal Portfolio
    Paul O'B is the CSS god

  9. #9
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    clear the floats

    head+body #container:after{
    content: ".";
    display: block;
    height:0;
    clear: both;
    visibility: hidden;
    }

  10. #10
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I tried that now and it works, thank you.

    Do you mind explaining that statement please? I've never seen anything like that statement before, like :after and content: "."; those don't make any sense to me. And why a height of 0? Thanks
    Personal Portfolio
    Paul O'B is the CSS god

  11. #11
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  12. #12
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks
    Personal Portfolio
    Paul O'B is the CSS god

  13. #13
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have a small issue with the content on the right hand side now, not sure what it is. I thought it might be the double margin bug but its not quite that much. The content on the right side shifts over to the right in IE by 17 pixels for some reason. It works properly in Firefox at the moment. I can't figure out whats pushing the content over like that, its weird. Any ideas? Thanks. Again the link is here: http://ramsaystudios.ca/clients/htbc/
    Personal Portfolio
    Paul O'B is the CSS god

  14. #14
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    try this

    leave width 90% out, use margins only
    .content_sidebox{/*width: 90%;*/margin: 0 12px 0 22px;

    #galleryImages {/*width: 90%;*/

  15. #15
    SitePoint Addict RamsayX's Avatar
    Join Date
    Oct 2003
    Location
    Canada
    Posts
    324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that works
    Personal Portfolio
    Paul O'B is the CSS god


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
  •