...

View Full Version : Gap at bottom of page



mrsmorse
02-18-2009, 02:43 PM
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.

Rowsdower!
02-18-2009, 02:49 PM
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...

abduraooft
02-18-2009, 02:51 PM
#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;
}?

Rowsdower!
02-18-2009, 03:01 PM
Here's one example of a solution (http://www.pmob.co.uk/temp/ie7test6.htm). 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! :D

Excavator
02-18-2009, 07:33 PM
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
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:
<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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum