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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Location
    Birmingham, AL
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Need to remove extra white space after footer

    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

    Code:
    <!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>
    Attached Thumbnails Attached Thumbnails Need to remove extra white space after footer-pic.jpg  
    Attached Files Attached Files

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Location
    Birmingham, AL
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AndrewGSW View Post
    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....

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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>.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Tags for this Thread

    Posting Permissions

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