Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Gap at bottom of page

    Hi eveyone,

    I have a quandry. I'm re-designing the website for the company I work for. The first page of the site is completed and the html and css have been validated. At the very bottom of the page there is a big gap between the bottom 2 green boxes where the page is supposed to end and where the browser ends. I don't know what is causing this. I'm guessing it has something to do with my css but I can't seem to pinpoint it. Does anybody have any suggestions?

    http://www.sayitwithstitches.ca/new-site

    http://www.sayitwithstitches.ca/new-site/style.css

    I have gotten the page working in IE, Firefox, Safari, Chrome and Opera but this gap seems to appear in all of them.

    Thanks for your help in advance.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Hello and welcome to the forums! Your problem seems to be that your page is not 100% in height. If you resize your browser window to a shorter height you can see that your footer actually IS the bottom of the page. You need to research ways to achieve 100% minimum height layouts and incorporate those tactics.

    Hit up the ol' google for this...
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    #footer {style.css (line 71)
    background-image:url(images/bottom-bar.jpg);
    background-repeat:no-repeat;
    clear:both;
    float:left;
    height:93px;
    /*margin-top:15px;*/
    padding-left:20px;
    padding-top:20px;
    text-align:left;
    vertical-align:middle;
    width:960px;
    }
    ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Here's one example of a solution. Since you're getting paid for the work you'll need to tailor it yourself or find a solution you like better. It shouldn't be too tough, but it's your paycheck, not mine!
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello mrsmorse,
    Have a demo page of a method that can easily be added to your code - http://nopeople.com/CSS/full-height-layout/index.html



    Like this -
    CSS
    Code:
    div {
       -moz-box-sizing: border-box;
    	 box-sizing: border-box;
    	 margin: 0;
    	 padding: 0;
    	}
    
    body,
    html {
    height:100%;
    	 background-color: #FFFFFF;
    	 text-align: center;
    	 font-family: Tahoma,Arial,Helvetica,sans-serif;
    	 font-size: 13px;
      }
    /** {
       padding: 0;
    	 margin: 0;
    } This is a universal reset that zeros all default margin/padding. To use it
    you will have to specify your own*/
    #container {
    	width: 960px;
    	min-height: 100%;
    	height: auto !important;
    	height: 100%;
    	margin: 0 auto -103px; /* the bottom margin is the negative value of the footer's height */	}
    	 
    #header {
       width: 960px;
    	 height: 219px;
    	}
    	 
    #menu {
       margin: -5px 0px 0px 0px;
    	 width: 960px;
    	 height: 48px;
    	 padding: 0;
    	}
    
    #left-menu {
       width: 230px;
    	 float: left;
    	 margin-top: 15px;
    	 text-align: left;
    	 border-right: 2px dashed black;
    	}
    	 
    #testimonial-box {
       width: 213px;
    	 height: 138px;
    	 background-image: url('images/testimonial-1.jpg');
    	 background-repeat: no-repeat;
    	 position:relative;
    	}
    	 
    #testimonial {
    	 width: 188px;
    	 height: 110px;
    	 text-align: justify;
    	 font-size: 11px;
    	 position: absolute;
    	 left: 50%; 
    	 top: 50%; 
    	 margin-left: -94px; 
    	 margin-top: -55px;
    	}
    	 
    #content {
       width: 715px;
    	 float: right;
    	 margin-top: 15px;
    	 text-align: left;
    	 font-size: 14px;
    	}
    #footer, #push {
       width: 960px;
    	 height: 93px;
    	 clear: both;
             margin-top:15px;
    	 padding-top: 20px;	 
    }
    #footer {
    	 background-image: url('images/bottom-bar.jpg');
    	 background-repeat: no-repeat;
    	 text-align: left;
    	 vertical-align: middle;
             margin-top:15px;
    	 padding-left: 20px;
    	 padding-top: 20px;
      } 
    p  {
    	 text-align: justify;
    	 padding-right: 10px;
    	}
    	 
    a {
       color: #D8531E;
    	 text-decoration: none;
    	}
    
    a:visited {
       color: #A3A3A3;
    	}
    
    a:active {
       color: #D8531E;
    	}
    	 
    a:hover {
    	 text-decoration: underline;
    	 font-weight: normal;
    	}
    	
    a.footer {
       color: #41622D;
    	 text-decoration: none;
    	 font-weight: bold;
    	}
    
    a:visited.footer {
       color: #41622D;
    	 font-weight: bold;
    	}
    
    a:active.footer {
       color: #41622D;
    	 font-weight: bold;
    	}
    	 
    a:hover.footer {
    	 text-decoration: underline;
    	 font-weight: normal;
    	 font-weight: bold;
    	}
    	 
    img {
       border: 0;
    	}
    	 
    img.content {
    	 margin: 0 0 10px 10px;
    	 float: right;
    	}
    	
    span.footer {
       color: #41622D;
    	 font-weight: bold;
    	 padding: 0;
    	 margin: 0px;
    	 width: 100%;
    	}
    	 
    span.accent {
       color: #D8531E;
    	}
    	 
    span.right {
       text-align: right;
    	 width: 100%;
    	 float: right;
    	}
    
    span.coupon {
       padding-top: 5px;
    	 padding-bottom: 5px;
    	}
    markup:
    Code:
    <div id="container">
    		 <div id="header">
    		 			<img src="images/header.jpg" alt="Say it with Stitches Promotional Products &amp; More" usemap="#header1" width="960" height="219">
    		 </div>
    		 <div id="menu">
    		 			<a href="index.html" onmouseover="rollover('home')" onmouseout="rollout('home')"><img src="images/button_03.jpg" name="home" alt="Home" width="88px" height="48px"></a><a href="about-us.html" onmouseover="rollover('aboutus')" onmouseout="rollout('aboutus')"><img src="images/button_04.jpg" name="aboutus" alt="About Us" width="132px" height="48px"></a><a href="specials.html" onmouseover="rollover('specials')" onmouseout="rollout('specials')"><img src="images/button_05.jpg" name="specials" alt="Specials" width="118px" height="48px"></a><a href="our-products.html" onmouseover="rollover('products')" onmouseout="rollout('products')"><img src="images/button_06.jpg" name="products" alt="Our Products" width="167px" height="48px"></a><a href="custom.html" onmouseover="rollover('custom')" onmouseout="rollout('custom')"><img src="http://www.sayitwithstitches.ca/new-site/images/button_07.jpg" name="custom" alt="Custom Decoration" width="228px" height="48px"></a><a href="store.html" onmouseover="rollover('store')" onmouseout="rollout('store')"><img src="images/button_08.jpg" name="store" alt="Our Store" width="130px" height="48px"></a><a href="visit-us.html" onmouseover="rollover('visit')" onmouseout="rollout('visit')"><img src="images/button_09.jpg" name="visit" alt="Visit Us" width="97px" height="48px"></a>
    		 </div>
    		 <div id="left-menu">
    		 			<a href="http://www.sayitwithstitches.ca/lists"><img src="images/email-list.jpg" alt="Join our e-mail list" width="211" height="97"></a><br>
    					<span class="coupon"><a href="coupon.html"><img src="images/coupon-1.jpg" alt="Coupon" width="211" height="155"></a></span><br>
    						 <div id="testimonial-box">
    						 			<div id="testimonial">They provide very good value with all of their products and more importantly <span class="accent">provide a high level of service</span> response with each and every order, large or small."<br><br>
    											 <span class="right">-- Black &amp; McDonald<br>
    											 <a href="testimonials.html">Read More &gt;&gt;</a></span>
    									</div>
    						 </div>
    		 </div>
    		 <div id="content">
    		 			<img class="content" src="images/brochure-pic.jpg" alt="Say it with Stitches features a vast variety of promotional products including pens, mugs, paper products, apparel, bags, umbrellas, tote bags, etc." width="210" height="269">
    					<b><span class="accent">Say it with Stitches Promotional Products &amp; More offers...</span></b>
    								 <ul>
    								 <li>Casual &amp; Corporate Apparel</li>
    								 <li>Promotional Products</li>
    								 <li>On-site Embroidery</li>
    								 <li>Heat Sealing</li>
    								 <li>Screen Printing</li>
    								 <li>Teamwear</li>
    								 <li>Business Gifts &amp; Incentives</li>
    								 </ul>
    					<p>We strive to make your image bold, memorable, and professional.</p>
    					<p>We offer a <span class="accent">full line of Promotional Products</span> - everything from leather jackets to ball caps, from pens to pocket watches, from golf shirts to golf balls &amp; much much more.
    					</p><p>We also offer <span class="accent">in-house custom embroidery services</span>. We can take your logo, convert it to embroidery format using the process of digitizing, and embroider it onto garments (either purchased here or customer supplied). We also have a collection of stock designs that are great for designing a logo or for personal use.</p> 
    					<p>Say it with Stitches has a customer base ranging from Corporate, Government, Institutional, Clubs, Sport Teams and Individuals. No matter who you are, at Say it with Stitches <span class="accent"><b>"Your Image is Our Priority!"</b></span></p>
    		 </div>
    		 <div id="push"></div>
    <!--end container--></div>
    <div id="footer">
    	   			<span class="footer"><a class="footer" href="index.html">Home</a> | <a class="footer" href="about-us.html">About Us</a> | <a class="footer" href="specials.html">Specials</a> | <a class="footer" href="our-products.html">Our Products</a><br>
    					<a class="footer" href="custom.html">Custom Decorating</a> | <a class="footer" href="our-store.html">Our Store</a> | <a class="footer" href="visit-us.html">Visit Us</a><br><br>
    					© 2009 Say it with Stitches Inc. | <a class="footer" href="sitemap.html">Sitemap</a></span>
    		 </div>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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