Skip to content

Question for the HTML and CSS guys

Web hosting discussion, programming, and shared and dedicated servers.
6 posts Page 1 of 1
Post a reply

Question for the HTML and CSS guys

by kortag » Mon Apr 01, 2013 5:07 pm
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?? Ive 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 them.

Here is the link: http://sonic.net/~kortag/new.htm

Many Thanks...!!!

Here is the code if you prefer that:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>6

<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: 661px;
-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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
//-->
</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 align="center">
<div id="footer">Footer</div>
<!-- close of footer -->
</div>
<div id="rightColumn"></div>
<!-- close of right Column -->

</div>
<!--close of globalWrapper -->


</body>
</html>
by thulsa_doom » Mon Apr 01, 2013 6:01 pm
Try dropping that extra div your footer is tucked into.

http://sonic.net/jdf/kortag/
John Fitzgerald
Sonic Technical Support
by kortag » Mon Apr 01, 2013 6:29 pm
Thank you for your response John!

That was an extra DIV that had not yet been added to the page. I have dropped that DIV you noticed and the extra space has been reduced by about 50%. However there still remains a large space below the footer.

This one has really been a puzzle....
by thulsa_doom » Wed Apr 03, 2013 11:53 am
From the most recent version of your "new.html" file it looks like you got rid of the opening div tag but then removed the closing div tag for the #globalWrapper. Also the negative "top" styling disappeared on the rightmost column. I copied your HTML over to http://sonic.net/jdf/kortag/ and removed the </div> tag right after the footer (and tinkered a little with the #rightColumn style) and the bottom margin issue is gone in Iron, IE, and Opera. It persists in Firefox for reasons I don't get.

I assume this has to do with the odd order of content and negative relative positioning being used. I switched the order around a little, added a #columnWrapper div, used absolute positioning for the columns, and put it up at http://sonic.net/jdf/kortag/absolute.html if you want to try that method.
John Fitzgerald
Sonic Technical Support
by kortag » Wed Apr 03, 2013 3:59 pm
John,

THANK YOU...!!!!!!! This one really had me stumped!

I am learning CSS and it has presented some challenges. Most of it I can wrap my mind around with the exception of CSS positioning statements. At first glance it makes sense...but when you apply it is where it gets confusing. The relationship of absolute and relative positioning is one I'm going to have to spend some time on.

The other parts that present some frustration is how the different browsers render the code and then contending with various screen resolutions.

Yikes...!!

I have a lot more studying to do.

John I want to sincerely thank you for your help on this one, I truly appreciate it!
by thulsa_doom » Wed Apr 03, 2013 4:40 pm
Agreed. Absolute positioning is an odd bird; it's relative to the containing element but only if that element is itself positioned. As for varying browser behaviors, it's positively maddening, and the only reason I have four browsers installed on my workstation.
John Fitzgerald
Sonic Technical Support
6 posts Page 1 of 1

Return to “Hosting”