Hi all,

Me again, and my noobness.

I am having problems with my footer having white space beneath it that i want to remove. I have been sitting here for hours trying to figure it out.:S

I am also having a problem with the top black bar stretching so that it is across the window at all times. I have googled and tried lots of solutions but still cant find something. It perhaps could be my coding.

PLease may i ask someone to help me....so much of frustration ...sigh.

HTML

HTML Code:
<!DOCTYPE HTML>
		<html xmlns="http://www.w3.org/1999/xhtml">


		<head>
		
		<meta charset="UTF-8">
		<link href="general.css" rel="stylesheet" type="text/css">
		<title>TEMP NAME</title>
		
		<div class = "top_bar">
		<div class="left_bar">
		<img src="left_bar.png" alt="Left Bar"></img>
		</div>
		<div class="middle_bar">
		<img src="middle_bar.png" alt="Middle Bar"></img>
		</div>
		<div class="right_bar">
		<img src="right_bar.png" alt="Right Bar"></img>
		</div>
		</div>
		<div class="header_main">
		<img src="header.png" alt="header"></img>
		</div>
		</head>
		
		<body id="wrap">
		
		
		
		
		<div class="whole">
		
		<div class="window">
		
		<div class="windows">
		<video id="vid1" width="130" height="400" poster="cube.png" loop>
		<source src="test.mov" type="video/mov">
		</source>
		</video>
		</div>
		<div class="windows">
		<video id="vid1" width="130" height="400" poster="cube.png" loop onfocus="hoverVideo()">
		<source src="test.mov" type="video/mov">
		</source>
		</video>
		</div>
		<div class="windows">
		<video id="vid1" width="130" height="400" poster="cube.png" loop onfocus="hoverVideo()">
		<source src="test.mov" type="video/mov">
		</source>
		</video>
		</div>
		<div class="windows">
		<video id="vid1" width="130" height="400" poster="cube.png" loop onfocus="hoverVideo()">
		<source src="test.mov" type="video/mov">
		</source>
		</video>
		</div>
		<div class="windows">
		<video id="vid1" width="130" height="400" poster="cube.png" loop onfocus="hoverVideo()">
		<source src="test.mov" type="video/mov">
		</source>
		</video>
		</div>
		</div>
		
		<p class="content">
		asdsadadsfafasdf
		
		</p>
		<p class="content">
		asdsadadsfafasdf
		
		</p>
		<p class="content">
		asdsadadsfafasdf
		
		</p>
		<p class="content">
		asdsadadsfafasdf
		
		</p>
		<p class="content">
		asdsadadsfafasdf
		
		</p>
		<p class="content">
		asdsadadsfafasdf
		
		</p>
		<p class="content">
		asdsadadsfafasdf
		
		</p>
		
		
		
		
		</div>
		<div class="footer">
		<img src="footer.png" alt="Footer"></img>
		</div>
		</body>
		<footer>
		
		
		</footer>
		<script src="code.js" type="text/javascript"></script>
		</html>




CSS


Code:
#wrap{ 
	width: 964px;
	margin: auto; 
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -40px;
	background:url(blue.png);
	background-size: cover;

	
	
	
	
}
#bg{
  width: 100%;
  height:100%;
  min-width:1000px;
  min-height: 750px;
  position: absolute;
  top: 0;
  left: 0;
}
div.body{
	




}

div.header_main{

	position:relative;
	text-align : center;
	width: 964px;
	min-width:964x;
	max-width:964px;
	height: 150px;
	margin-left:auto;
	margin-right:auto;
	



}
div.top_bar{
	
   left :0;
   top:0;
   margin: 0;
   padding: 0;





}
div.left_bar{

	
	display : block;
	position:relative;
	width: 385.6px;
	min-width:386px;
	max-width:386px;
	height : 80px;
	float: left;
	
	
	
}
div.middle_bar{

	
	display : block;
	position:relative;
	width: 192px;
	min-width:192px;
	max-width:192px;
	height : 80px;
	float : left;
	

}
div.right_bar{

	
	display : block;
	position:relative;
	width: 386px;
	min-width:386px;
	max-width:386px;
	height : 80px;
	float : left;
	
	
	
}
div.left_panel{
	
	
	display : block;
	float : left;
	position: relative;
	width:44px;
	height:600px;
	
	
	
}
div.right_panel{
	
	display : block;
	float : right;
	position: relative;
	width:44px;
	height:600px;
	
	
}
div.footer_bar{

	
	
	width: 964px;
	position:relative;
	min-width:964px;
	max-width:964px;
	height : 40px;
	
}
div.window
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 680px;
	height:400px;
	background-image:url('white.png');
	background-size : 100% 100%;
}
div.windows
{
	margin-top:30px;
	border-style:outset;
	width: 130px;
	height:400px;
	float:left;
	position :relative;
	margin-bottom : 40px;

}

div.border
{
	border-style:solid;
	border-width:3px;
	border-color: rgb(0,0,0);
	border-width:25px 25px 25px 25px;
	-moz-border-image:url("b1.png") 30 30 30 30 Stretch stretch;
	-webkit-border-image:url("b1.png") 30 30 30 30 Stretch stretch;
	border-image:url("b1.png") 30 30 30 30 Stretch stretch;

}
p.content
{
	display : block;
	width: 850px;
	min-width:850px;
	max-width:850px;
	text-align: center;
	
	
	
}
div.whole{
	background-image:url('white.png');
	background-size : 100% 100%;
	opacity:0.9;
	margin-top:80px;


}
div.footer{
   
position:fixed;
bottom:0;
left:auto;
padding:0px;
margin:0px;
clear: both;




}
iframe.test{


display: block;
border:0;
margin: 0 auto;
overflow: hidden;
width : 100%;
height :900px;
max-width : 900px;
position: relative;


}