...

View Full Version : Need to remove extra white space after footer



austindickey
08-03-2012, 11:04 PM
Hey guys,

So I've got a website I'm working on, and it's almost done. The main problem I have is I have extra white space after my footer... I attached a picture and my CSS stylesheet. Below is the HTML code for my index




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Jailbreak My Stuff</title> <!-- The websites title. You can change this to whatever you want. -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Cache-control" content="no-cache" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="Keywords" content="plus, web design, html, template, studio" /> <!-- Key words for the search engines. Change this to whatever you want. -->
<meta name="Description" content="PLUS HTML TEMPLATE - A HTML Template by ilove2design.at" /> <!-- Website description. Change this to whatever you want. -->
<meta name="robots" content="index,follow" />
<meta name="revisit-after" content="2 days" /> <!-- Tells the search engines bots (Google, MSN, Yahoo...etc) when to revisit your website. -->

<link href="style.css" type="text/css" rel="stylesheet" media="screen" /> <!-- The websites CSS file. Keep in mind that you have to change this line if you rename or move the CSS file. -->
<link rel="stylesheet" href="coin-slider/coin-slider-styles.css" type="text/css" /> <!-- The Coin-Slider CSS file. Keep in mind that you have to change this line if you rename or move the CSS file. -->
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" /> <!-- The FancyBox CSS file. Keep in mind that you have to change this line if you rename or move the CSS file. -->
<link rel="shortcut icon" href="favicon.ico" title="Favicon" /> <!-- The websites Fav-icon. -->

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" ></script> <!-- Makes the Theme use jQuery -->

<script src="fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript" ></script> <!-- The FancyBox Script -->


<script type="text/javascript" src="coin-slider/coin-slider.min.js"></script> <!-- The Coin-Slider Script -->

<script src="cufon/cufon-yui.js" type="text/javascript"></script> <!-- The Text Replacement script. Keep in mind that you have to change this line if you rename it. -->
<script src="cufon/Myriad_Pro_400-Myriad_Pro_700-Myriad_Pro_italic_400-Myriad_Pro_italic_700.font.js" type="text/javascript"></script> <!-- The Text Replacement script. Keep in mind that you have to change this line if you rename it. -->
<script src="cufon/Aller_Light_400-Aller_Light_italic_400.font.js" type="text/javascript"></script> <!-- The Text Replacement script. Keep in mind that you have to change this line if you rename it. -->
<script type="text/javascript">
Cufon.replace('h1, #newsletter_headline p, #newsletter_headline_small p, .content_headline p, .content_headline_small p, .box_header_text_big p, .box_header_text_small p, .folio_element_head p, .box_footer_left_big p, .box_footer_left_small p', { fontFamily: 'Myriad Pro' });
Cufon.replace('h3', { fontFamily: 'Myriad Pro' , hover: true });
Cufon.replace('h2', { fontFamily: 'Aller Light' });
</script>

<script type="text/javascript">
$(document).ready(function() {
$("a.single_image").fancybox();
});
</script>


<script type="text/javascript">
$(document).ready(function() {
$('#slider').coinslider({ width: 930, height: 351, navigation: true, delay: 4000, effect: 'straight', sDelay: 40, spw: 10, sph: 7 });
});
</script>

</head>
<body>

<!-- Start Wrapper -->
<div id="wrapper">

<!-- Start Header -->
<div id="header">

<!-- Start Logo -->
<div id="pluslogo">
<a href="#"><img src="graphics/pluslogo.png" alt="Plus Logo" width="20" height="20" border="0" /></a>
</div>

<div id="logo">
<h1><a href="#">Jailbreak My Stuff</a></h1>
</div>
<!-- End Logo -->

<!-- Start Navigation -->
<div id="navigation_wrap">

<div id="navigation">

<ul>
<li><h3><a class="main" href="contact.html">Contact Me</a></h3></li>
<li><h3><a class="main" href="clients.html">Testimonials</a></h3></li>
<li><h3><a class="main" href="services.html">Services</a></h3></li>
<li class="active"><h3><a class="main" href="#">Home</a></h3></li>
</ul>

</div>

</div>
<!-- End Navigation -->

</div>
<!-- End Header -->


<!-- Start Content -->
<div id="content_home">

<!-- Start Slider Frame -->
<div align="center" id="slider_frame">

<br>
<a href="contact.html"><img src='pictures/slider1.png' alt="" /></a>


</div>
<!-- End Slider Frame -->


<!-- Start Content Element Wrap-->
<div class="content_element_wrap">

<!-- Start Headline -->
<div class="headline_wrap">

<div class="headline_text">

<!-- Start Big Headline -->
<div class="content_headline">
<p>Jailbreak Your Apple Devices</p>
</div>
<!-- End Big Headline -->

<!-- Start Slogan Headline -->
<div class="content_headline_small"><p>About Jailbraking</p>
</div>
<!-- End Slogan Headline -->
</div>
</div>
<!-- End Headline -->


<!-- Start Content Text Wrap -->
<div class="content_text_wrap">

<img src="pictures/about.png" alt="" width="315" height="293" border="0" class="content_pic_left" />

<i><p><strong>What is jailbreaking?</strong> </p></i>
<p>iOS jailbreaking is the process of removing the limitations imposed by Apple on devices running the iOS operating system through the use of hardware/software exploits.</p>
<p>&nbsp;</p>
<i><p><strong>How will this affect my device?</strong> </p></i>
<p>When you jailbreak your device, you gain access to Cydia. Cydia is a lot like the App Store; the main difference being, what you can download. You can use cydia to download things from tiny tweaks, to full on apps.</p>
<p>&nbsp;</p>
<i><p><strong>Can I get Siri?</strong> </p></i>
<p>For most devices, yes. There are exceptions to the ones without microphones (for example, the iTouch 1G).</p>
<p>&nbsp;</p>
<i><p><strong>Will I loose any of my files, and can my device be "un-jailbroken"?</strong> </p></i>
<p>No, you will not loose any of your files; and yes, your device can be restored to normal.</p>
</div>
<!-- End Content Text Wrap -->


</div>
<!-- End Content Element Wrap-->

</div>
<!-- End Content -->

<!-- Start Push -->
<div class="push"></div> <!-- DO NOT CHANGE, REMOVE OR ADD SOMETHING THIS LINE!!! -->
<!-- End Push -->

</div>
<!-- End Wrapper -->

<!-- Start Footer -->
<div class="footer">


<!-- Start Footer Grid -->
<div id="footer_grid">

<div id="footer-m1"></div>

<!-- Start Footer Left -->
<div id="footer-c1">

<br>
<br>

<h2 align="center">Social Media</h2>

<div align="center">

<a href="http://www.facebook.com/austindickey10/" target="_self"><img src="graphics/icon_facebook.png" alt="" class="social_icons" /></a><a href="http://www.twitter.com/austindickey10/" target="_self"><img src="graphics/icon_twitter.png" alt="" width="32" height="32" class="social_icons" /></a></div>

</div>
<!-- Footer Left End -->


<br>

<div id="footer-m2"></div>

<!-- Start Footer Center -->
<div id="footer-c2">

<br>

<h2 align="center">Designed by: </h2>

<p align="center"><a href="http://www.austindickey.com/">Austin Dickey</a></p>
</div>
<!-- End Footer Center -->

<div id="footer-m3"></div>

<!-- Start Footer Right -->
<div id="footer-c3">

<h2 align="center">Get In Touch </h2>
<p><strong>Location:</strong> Birmingham, AL<br />
<strong>Phone:</strong> 760.238.6097<br />
<strong>Email:</strong> <a href="mailto:austindickey@me.com">austindickey@me.com</a></p>
</div>
<!-- End Footer Right -->

<br style="clear:both" />

</div>
<!-- End Footer Grid -->


</div>
<!-- End Footer -->


<script type="text/javascript"> Cufon.now();</script>
</body>
</html>

AndrewGSW
08-04-2012, 02:25 AM
You are using height: 100% on html, body and at least one other element e.g. wrapper. If the body has a height of, say 1000px, then the wrapper element will also have this height.

This behaviour seems to be a quirk of css, but it accounts for the large gap at the bottom, I believe.

If you don't need 100% height on the wrapper then remove this property.

austindickey
08-04-2012, 04:12 PM
You are using height: 100% on html, body and at least one other element e.g. wrapper. If the body has a height of, say 1000px, then the wrapper element will also have this height.

This behaviour seems to be a quirk of css, but it accounts for the large gap at the bottom, I believe.

If you don't need 100% height on the wrapper then remove this property.
I tried that... That didn't fix it either....

AndrewGSW
08-04-2012, 06:34 PM
I think you have a mis-matched <div> tag somewhere. That is, a closing, but no opening, tag - or vice versa.

With your DOCTYPE you should use <br /> and not <br>.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum