[Help Needed] CSS - Extra pixels below footer need removing - JavaScript and CSS

#1
Paxjah

Posted 19 October 2009 - 01:27 PM

Newbie

Members
6 posts

I am not a newbie, but I am frustrated with what could possibly be a very simple problem, and I cannot seem to solve it.

I have 25 pixels of extra space below my footer that should not exist.

I want my #footer to stay at the bottom, my #containerr to stretch the height of the page but I also want #bkg to remain outside the #container and stay static at the top.

The reason it is adding 25 pixels is definately because of #bkg ( height: 25px; ) and with my container height 100%, it adds the extra 25 pixels to that and shoves it below footer.

There must be a way to get rid of it.

I have attached my code below. Please if anyone can help, or even point me in the right direction, I will very much appreciate it. Thankyou :)

HTML:

<body>

<div id="bkg">

	<div id="top"></div>

</div>

<div id="container">

	<div id="header"></div>
    
    <div id="menu"></div>
    
    <div id="wrapper">
    
    	<div id="line"></div>
    
    	<div id="content"></div>
        
	</div>
    
    <div id="footer"></div>
    
</div>

</body>

CSS:

html, body {
	background: #464646;
	margin: 0;
	padding: 0;
	height: 100%;
}

#bkg {
	background: #383838;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 25px;
}

#top {
	background: #CCC url(../images/halloween/bkg_top.png) no-repeat;
	margin: 0 auto;
	padding: 0;
	width: 814px;
	height: 25px;
}

#container {
	background: #6FF url(../images/halloween/bkg_container.png) repeat-y;
	margin: 0 auto;
	padding: 0;
	width: 814px; /* -14px for left and right padding */
	height: 100%;
}

#header {
	background: #FF6;
	margin: 0 0 0 7px;
	padding: 0;
	width: 800px;
	height: 75px;
}

#menu {
	background: #06F url(../images/halloween/bkg_menu.png) repeat-x bottom;
	margin: 0 0 0 7px;
	padding: 0 0 4px 0;
	width: 800px;
	height: 33px; /* -4px for bottom padding */
}

#wrapper {
	background: #F6C;
	margin: 0 0 0 7px;
	padding: 0;
	width: 800px;
	height: auto;
}

#line {
	margin: 0;
	padding: 0;
	width: 800px;
	height: 4px;
}

#title {
	background: #C00;
	margin: 0;
	padding: 12px 0 12px 0;
	width: 800px;
	height: 16px; /* -24px for top and bottom padding */
	text-align: center;
}

#content {
	background: #33C;
	margin: 0;
	padding: 0 20px 0 20px;
	width: 760px; /* -40px for left and right padding */
	height: auto;
}

#footer {
	background: #60F url(../images/halloween/bkg_footer.png) no-repeat;
	margin: 0 0 0 7px;
	padding: 0;
	width: 800px;
	height: 88px;
	bottom: 0;
	position: absolute;
}

Edited by Paxjah, 20 October 2009 - 08:02 AM.

#2
debtboy

Posted 19 October 2009 - 02:32 PM

Programming God

Members
916 posts

What is the actual height dimension of bkg_footer.png is it around 63px??

http://unixclubhouse.com

#3
Paxjah

Posted 19 October 2009 - 02:37 PM

Newbie

Members
6 posts

debtboy said:

What is the actual height dimension of bkg_footer.png is it around 63px??

No, it is 88px exactly :)

#4
debtboy

Posted 19 October 2009 - 02:49 PM

Programming God

Members
916 posts

why is your footer absolute??

http://unixclubhouse.com

#5
Paxjah

Posted 19 October 2009 - 02:54 PM

Newbie

Members
6 posts

debtboy said:

why is your footer absolute??

To have it stay at the bottom of the page, only problem is there seems to be something non-existent with a height of 25 pixels pushing it up and making a space which should not be there.

#6
debtboy

Posted 19 October 2009 - 03:22 PM

Programming God

Members
916 posts

what happens when you use
margin-bottom: 88px;
under #content??

http://unixclubhouse.com

#7
Paxjah

Posted 20 October 2009 - 03:02 AM

Newbie

Members
6 posts

debtboy said:

what happens when you use
margin-bottom: 88px;
under #content??

Sorry for the later reply!

Nothing happens at all, the look stays the same :(

#8
amrosama

Posted 20 October 2009 - 03:52 AM

Writes binary right handed and hex left handed

Members
8,674 posts

do you have a link for the actual page or an HTML file?

try removing the "height: 100%;"
sometimes height/width attributes act funny on IE

yo homie i heard you like one-line codes so i put a one line code that evals a decrypted one line code that prints "i love one line codes"

eval(base64_decode("cHJpbnQgJ2kgbG92ZSBvbmUtbGluZSBjb2Rlcyc7"));

www.amrosama.com | the unholy methods of javascript

#9
Paxjah

Posted 20 October 2009 - 04:05 AM

Newbie

Members
6 posts

amrosama said:

do you have a link for the actual page or an HTML file?

try removing the "height: 100%;"
sometimes height/width attributes act funny on IE

I've tried this to no avail. I know what my problem is, I want my #footer to stay at the bottom, my #containerr to stretch the height of the page but I also want #bkg to remain outside the #container and stay static at the top.

The reason it is adding 25 pixels is definately because of #bkg ( height: 25px; ) and with my container height 100%, it adds the extra 25 pixels to that and shoves it below footer.

There must be a way to get rid of it.