#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    3
    Rep Power
    0

    Question Unexplained Space below footer.


    Hello All!

    Here is a question for the HTML and CSS guys here. I've been pulling out my hair on this one.

    Why is there so much space below my footer?? I've checked the HTML and CSS code and I'm not finding anything. These results are consistent with all the browsers...Firefox, IE, Safari, Chrome etc.

    Pay no attention to the gawdy colors, I use bright colors to position my DIV's before changing the colors to something more appropriate.

    Below is the code:

    Many Thanks...!!!

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "(URL address blocked: See forum rules)">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    
    <style type="text/css">
    	
      #globalWrapper {
    	width: 990px;
    	height: 720px;
    	margin: 0 auto;
    	background-color:#666666;
    	border: thin solid #000000;
    		}
    		
      #header  {
    	width: 990px;
    	height: 125px;
    	background-repeat: no-repeat;			
    		
    		}
    		
       #navBar  {
    	width: 990px;
    	height: 30px;
    	background-color:#73A0D6;
    	position: relative;
    	top: 0px;
    	border-top-width: thin;
    	border-right-width: thin;
    	border-bottom-width: thin;
    	border-left-width: thin;
    	border-bottom-style: solid;
    	border-top-color: #FFFFFF;
    	border-right-color: #FFFFFF;
    	border-bottom-color: #FFFFFF;
    	border-left-color: #FFFFFF;
    	border-top-style: solid;
       }
    		
      #leftColumn {
    	width: 645px;
    	height: 525px;
    	padding-left: 5px;
    	left: 5px;
    	position: relative;
    	top: 5px;
    	-moz-border-radius: 15px;
    	border-radius: 15px;
    	background: #FF9966 no-repeat;
    		}
    		
      #leftcolumnArticle  {
    	width: 250px;
    	height: 525px;
    	position: relative;
    	left: 20px;
    	padding-left: 10px;
    	-moz-border-radius: 15px;
    	border-radius: 15px;
    	line-height: 20px;
    	background: #009966;
    	top: -520px;
      }
    		
    
      #rightColumn  {
    	width: 323px;
    	height: 525px;
    	position: relative;
    	top: -1075px;
    	left: 660px;
    	-moz-border-radius: 15px;
    	border-radius: 15px;
    	background: #999966 no-repeat;
    		}
    		
    		
      #footer  {
    	width: 990px;
    	height: 25px
    	clear: both;
    	height: 30px;
    	left: 0px;
    	top: -517px;
    	margin: 0 auto;
    	position: relative;
    	background: #73A0D6;
    	clear: both;
    		}
    	
    	.style5 {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: medium;
    }
        .style2 {	color: #FFFFFF;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: medium;
    }
        body {
    	background-image: url();
    	background-color: #93ADB7;
    }
    
    .style11 {	font-family: Arial, Helvetica, sans-serif;
    	font-size: x-small;
    	color: #FFFFFF;
    }
    </style>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    
    
    
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    //-->
    </script>
    </head>
    
    <body>
    
    <div id="globalWrapper">
      <div id="header">Header</div> <!--close of header -->
    	
      <div id="navBar">Nav Bar   </div> 
    	<!--close of navBar -->
    	
    	<div id="leftColumn"></div> <!-- close of leftColumn -->
    	
    	<div id="leftcolumnArticle">Left Column Article</div>  
    	<!-- close of leftcolumnArticle -->
    	
    	
    	  <div id="footer">Footer</div> 
    	  <!-- close of footer -->
     
    
      
    	<div id="rightColumn"></div> 
    	<!-- close of right Column -->
    	
     
    </div><!--close of globalWrapper -->
    
    
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    77
    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title></title>
    
    <style type="text/css">
    	
      #globalWrapper {
    	width: 978px;
    	height: 713px;
    	margin: 0 auto;
    	background-color:#666666;
    	border: thin solid #000000;
      }
    
      #header  {
    	width: 990px;
    	height: 125px;
    	background-repeat: no-repeat;
      }
    		
       #navBar  {
    	width: 978px;
    	height: 30px;
    	background-color:#73A0D6;
    	border-top-width: thin;
    	border-right-width: thin;
    	border-bottom-width: thin;
    	border-left-width: thin;
    	border-bottom-style: solid;
    	border-top-color: #FFFFFF;
    	border-right-color: #FFFFFF;
    	border-bottom-color: #FFFFFF;
    	border-left-color: #FFFFFF;
    	border-top-style: solid;
       }
    		
      #leftColumn {
    	width: 645px;
    	height: 525px;
    	padding-left: 5px;
    	-moz-border-radius: 15px;
    	border-radius: 15px;
    	background: #FF9966 no-repeat;
    	text-align: center;
      }
    		
      #leftcolumnArticle  {
    	width: 250px;
    	height: 525px;
    	padding-left: 10px;
    	-moz-border-radius: 15px;
    	border-radius: 15px;
    	line-height: 20px;
    	background: #009966;
            position: absolute;
            margin-top: -525px;
      }
    		
    
      #rightColumn  {
    	width: 323px;
    	height: 525px;
    	-moz-border-radius: 15px;
    	border-radius: 15px;
    	background: #999966 no-repeat;
            position: absolute;
            margin-top: -525px;
            margin-left: 650px;
            padding-left: 5px;
      }
    		
    		
      #footer  {
    	width: 978px;
    	clear: both;
    	height: 30px;
    	margin: 0 auto;
    	background: #73A0D6;
            border-top-width: thin;
    	border-top-color: #FFFFFF;
    	border-top-style: solid;
      }
    	
      .style5 {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: medium;
    }
        .style2 {
    	color: #FFFFFF;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: medium;
    }
        body {
    	background-image: url();
    	background-color: #93ADB7;
    }
    
    .style11 {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: x-small;
    	color: #FFFFFF;
    }
    </style>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    
    
    
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    //-->
    </script>
    </head>
    
    <body>
    
    <div id="globalWrapper">
      <div id="header">Header</div> <!--close of header -->
    	
      <div id="navBar">Nav Bar  </div>
    	<!--close of navBar -->
    	
    	<div id="leftColumn">Center Text</div> <!-- close of leftColumn -->
    	
    	<div id="leftcolumnArticle">Left Column Article</div> 
    	<!-- close of leftcolumnArticle -->
    	
    	<div id="rightColumn">Right Column</div>
    	<!-- close of right Column -->
    	
    	 <div id="footer">Footer</div>
    	 <!-- close of footer -->
    	
    </div>
    <!--close of globalWrapper -->
    
    
    </body>
    </html>
    I changed your code a little bit and now it works

    The space was because of the position relative's

    You can view it here



    the way you do the borders is outdated btw
    Last edited by jack13580; April 1st, 2013 at 11:38 PM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    3
    Rep Power
    0

    Smile


    Thank you Jack...!!!
    Last edited by Kravvitz; April 2nd, 2013 at 06:03 PM. Reason: must we quote the whole post? :p
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    Welcome to DevShed Forums, Zernon44.

    To give more of an explanation, what relative positioning does is shift where an element appears to be without affecting the footprint of the element, so that other elements (that are not descendants of it) will act as if it's not relatively positioned. It's mostly only useful for making slight adjustments to positioning or sometimes for changing the order of columns. Here's a demo: http://www.css-101.org/relative-positioning/index.php

    Originally Posted by jack13580
    I changed your code a little bit and now it works
    Why did you remove the doctype? It's quite important for consistent cross-browser rendering.

    Originally Posted by jack13580
    the way you do the borders is outdated btw
    "Outdated"? What makes it outdated? However, it is rather inefficient to not use the shorthand properties that are available.
    Last edited by Kravvitz; April 2nd, 2013 at 06:05 PM.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    77
    The forum removed the link to make the doctype work and I didn't want to track down which doctype to use as I was more concerned with getting the code to work and I'm doing this on my iPad which makes it more difficult
    Last edited by jack13580; April 2nd, 2013 at 06:46 PM.
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    Ah. Yeah, typing code via a software keyboard on a touchscreen is a pain.

    Anyway, Zernon44, you should add the doctype you were using before back in or use the HTML5 one (which is nice and short as well as much newer):
    Code:
    <!DOCTYPE html>
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    3
    Rep Power
    0
    Thank you Kravvitz and Jack!

    I was looking for a better understanding of positioning statements, and that explanation and website you referred me to Kravvitz is very helpful!

    I'm experienced in HTML and have just started to learn CSS.

    I'm able to wrap my mind around most CSS with the exception of positioning statements. Positioning statements at first glance seem to make sense but when you begin to apply them and see how they relate to other statements in the page is confusing. When you factor in different browsers and various screen resolutions it really gets complicated.

    But I do see the value in CSS and am determined to continue!

    Thank you again you guys! I'm sure it will not be my last question here!
  14. #8
  15. No Profile Picture
    Permanently Banned
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Location
    Ludhiana
    Posts
    33
    Rep Power
    0
    Instead of using top: -517px,

    use bottom:0px;

    that should do the trick. Short and simple
  16. #9
  17. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,129
    Rep Power
    4304
    Originally Posted by shellygill
    Instead of using top: -517px,

    use bottom:0px;

    that should do the trick. Short and simple
    Welcome to DevShed Forums, shellygill.

    No, that wouldn't help. In fact it would just move the gap above the footer instead of below it. Remember we are talking about "relative positioning" here, not "absolute positioning".
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo