Layout problem, padding at the bottom of page?

**Immortal** · 09-27-2008, 11:49 PM

Hi guys,

Developing this site at the moment I want my flash navigation to be at the bottom although for some reason there is a gap and I cant understand why, go here to see the page. The gap is in IE and doesnt show in firefox. I also want the navigation to stay at the bottom and not just be at the bottom of the browser because it is left floating if the users browser is only a few 100px's high.

HERE

Thanks a lot!

**TheJoshMan** · 09-28-2008, 12:00 AM

I see the gap in both FF3 and IE7. Also, in FF3 the flash doesn't even work (I'm assuming either z-index or wmode)

I would recommend "validating" everything before attempting to correct any known issues, as doing so may in fact CORRECT some of your issues.

Your Markup Results

**Immortal** · 09-28-2008, 12:55 PM

Hey, thanks for the pointer. I made some changes and here is the results:

http://validator.w3.org/check?uri=ht...idator%2F1.591

it appears to just be 'problems' with my flash, is there a high chance it could be these problems I have left behind that are causing problems with my layout?

Thanks,

**TheJoshMan** · 09-28-2008, 03:35 PM

What's all this about? (the highlighted)

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ITA</title>
<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	vertical-align: bottom;
}
#abc {
	z-index: 80;
	position: absolute;
	height: 100%;
	width: 100%;
	vertical-align: middle;
	clip: rect(auto,auto,auto,auto);
}
-->
</style>
<!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" lang="en" xml:lang="en">

<script src="facefiles/jquery-1.2.2.pack.js" type="text/javascript"></script>
<link href="facefiles/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="facefiles/facebox.js" type="text/javascript"></script>

<script type="text/javascript">
    jQuery(document).ready(function($) {
      $('a[rel*=facebox]').facebox() 
    })
</script>
<script type="text/javascript">

/***********************************************
* IFrame SSI script- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["myframe"]

//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="yes"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

function dyniframesize() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById){ //begin resizing iframe procedure
dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
if (dyniframe[i] && !window.opera){
dyniframe[i].style.display="block"
if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //ns6 syntax
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight+FFextraHeight; 
else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //ie5+ syntax
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
}
}
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}

if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.onload=dyniframesize

</script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	left: 5%;
	top: 5%;
}
#apDiv2 {
	position:absolute;
	width:100%;
	height:100%;
	z-index:10;
	background-image: url(Images/overlay.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}
#overlay {
	height: 120px;
	width: 100%;
	z-index: 99;
	background-position: center bottom;
	visibility: visible;
	vertical-align: bottom;
	position: fixed;
}
#apDiv3 {
	position:absolute;
	width:130px;
	height:115px;
	z-index:99;
	left: 5%;
	top: 6%;
}
#apDiv4 {
	position:absolute;
	width:100%;
	height:120px;
	z-index:1;
}
#apDiv5 {
	position:absolute;
	width:100%;
	height:120px;
	z-index:1;
}
#Structure #Main #ppp {
	vertical-align: bottom;
	height: 120px;
}
#footer {
	width: 100%;
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: 80;
	margin: 0px;
	padding: 0px;
} 
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

Also, seeing as how you are not using anything which justifies the XHTML doctype. I would recommend changing your first 4 lines to the following.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title> ITA </title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

**Immortal** · 09-28-2008, 03:53 PM

Ok I made your suggested changes but still no change to my layout, do you know what may be causeing this gap?

**TheJoshMan** · 09-28-2008, 03:58 PM

those weren't necessarily to affect the layout. Those were to help validate.

Valid code is much easier to "fix" than invalid code.

Now, I don't know if I understood you correctly. Are you wanting the navigation to stay at the very bottom of the page even if the user scrolls? Or are you wanting it to be at the bottom and allow the user to "scroll it out of view"?

P.S. - You're still showing to be in XHTML transitional in the validator. (giving 38 errors)

**TheJoshMan** · 09-28-2008, 04:07 PM

Ok, i'm getting confused here..

Which page are we trying to fix?

I noticed that the last link you posted doesn't match the first page in question.

First page

Last link

Either way, the last link you sent doesn't have a doctype at all... but you have the <html xmls stated (meaning it's assuming xhtml)

**Immortal** · 09-29-2008, 08:49 PM

Basically I am not using the first page anymore, I put it through the validating process, it made some improvments and then resaved the new validated page as markup.html, so basically it is the second page I sent. I just really dont know what could be causing this gap, usually it's something blatent.

Thanks.

**Immortal** · 09-30-2008, 08:25 PM

For anyone else that has a similar problem. I changed the CSS placement to -5 and it eleminated the gap. Although for some reason the section stages at the bottom of the browser and not the page. Does anyone know how I would overcome this?

Thanks!

**herryjohn** · 10-05-2008, 09:38 AM

hope a better article

Thread: Layout problem, padding at the bottom of page?

Thread Tools

Search Thread

Layout problem, padding at the bottom of page?

The Following User Says Thank You to TheJoshMan For This Useful Post:

lol

Bookmarks

Bookmarks

Posting Permissions