My page scrolls down too far on IE.

[Spring]

Can anyone help me? Here's the css. Also, can you tell me why it scrolls down so far? I don't want it stretching like that.

 

html
{
width:1024px;
height:768px;
overflow-x:auto; 
overflow-y:auto;

}




#bodyhome
{
border-style:solid;
background-color:#c9c8c8;
margin: 0px -590px 0px 0px;
padding: 0px 0px 155px 0px;
background-image:url('images/background.gif');
background-repeat: repeat-x;
}

#wrapper
{
border-style:solid;
margin: 16px 0px 0px -20px;
padding: 0px 0px 250px 0px;
}


.logo
{

margin: -4px 650px 0px 9px;
padding: 0px 0px 0px 80px;

}

#question
{


font-size:14px;height:82px;padding:15px;width:479px;
margin: -300px 0px 0px 300px;
padding: 0px 200px 130px 50px;

}
#answerbox
{

position:relative;

bottom:65px;
left:90px;

}

#empty
{
resize: none;
font-style:italic;
}


#statbox
{
  
  position:relative;
  top:60px;
  left:70px;
}


#submit
{


position:relative;
bottom:50px;
left:240px;
}

#arrow
{

position:relative;
left:120px;
}

#randompost
{ 
  color: #c9c7c6;
  font-family: “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
  position:relative;
  bottom:60px;
  left:150px;
  font-family:Microsoft Sans Serif;
  font-size:20px;
  font-style:italic;
  font-weight:bold;
  
}
#darrow
{ 

  position:relative;
  left:100px;
  bottom:7px;
  
}
  
#checkbox
{ 
   position:relative;
   bottom:20px;
   left:90px;
   font-weight:bold;

}

#rightside
{
  border-style:solid;
  position:relative;
  left:670px;
  bottom:300px;

}

#vr
{


margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-style:solid;
border-top-style:none;
border-bottom-style:none;
border-left-style:none;

height: 200px; 
}



#field
{
  width: 340px;
  height: 37px;
  border-color: #c9c7c6;
  


}

#formsign
{
  left:50px;
  border-style:solid;
  position:relative;
  bottom:150px;

}

#labels
{
font-family: “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;
color: #c9c7c6;
font-size:18px;
font-weight:bold;


}

.sign_up_text
{



position:relative;
bottom:170px;
left:30px;

}

#hr
{
position:relative;
right:60px;
width:380px;

}

[haku]

The more descriptive you are, the more likely you are to get help. "Scrolls down too far"? What?

 

And CSS without HTML is meaningless. It's like telling someone 'I have a document using Arial font at a font size of 2px. Can you tell me why it takes up two pages?". CSS without HTML is like icing without a cake.

[Spring]

Here's the link

http://99.5.218.227/trollmev2/

 

When you go to the site you will notice that it scrolls down and shows too much whitespace, what am I doing wrong and how can I fix it? I tried making the wrappers margin smaller but it didn't work, any ideas?

 

and here's the css.

	html, body {
			background: url('images/background.gif') repeat-x;

			padding:0;
			margin:0;
			width: 100%;
			height: 100%;
		}

			.logo{
			background: url('images/logo.gif')  no-repeat;
			width:177px;
			height:106px;
			margin-left:200px;
			position:relative;
			top:25px;

		 }
		   .header{
		   width:100%
		   height:100%;

		   }
			.header marquee{
			  margin-top:55px;
			  font-size:18px;
			  font-weight:italic;
			}

		  .signbox{
		   position:relative;
		   bottom:393px;
		   left:1190px;
	       background: url('images/signup.gif')  no-repeat;
		   width:298px;
		   height:509px;
		  
		   
		   }
		   
		   #welcomeback{
		    
		    padding-top:25px;
			font:bold 25px "Helvetica Neue",Arial,Sans-serif;
			color:#333;
			padding-left:30px;

			}

			#hr1{
		    border-color:black;
                width:200px;
                border-top:1px 
			}

			#username{
			 position:relative;
			 left:20px;
			 color:#333;
			 font-family: "Helvetica Neue",Arial,Sans-serif;
			 font-weight:bold;
			 font-size:20px;
			 }

			#usernamef{
			position:relative;
			left:20px;
			border-color:black;
			width: 250px;
			height: 35px;
			border-width:1px;
			}

			#passwordf{
			position:relative;
			left:20px;
			border-color:black;
			width: 250px;
			height: 35px;
			border-width:1px;
			}

			#password{
			 position:relative;
			 left:20px;
			 color:#333;
			 font-family: "Helvetica Neue",Arial,Sans-serif;
			 font-weight:bold;
			 font-size:20px;
			 }

			#formsubmit{

			 position:relative;
			 left:30px;
			}
			#hr2{
			border-color:black;
                width:200px;
                border-top:1px 
                }
		   
		   #newuser{
		  
		   font-size:18px;
		   padding:0px 10px 0px 15px;
		   margin-left:17px;
		   }
		  
		  
		  #link{
		   color: #FFFFFF; 
		   text-decoration: none;
		   font-size:20px;
		   margin-left:43px;
		   }

        .wrapper{

    }

	.welcomemsg{
	 margin-left:460px;
         font-size:27px; 
	 font-family:"Helvetica Neue";
	}
        
        		

	#textarea{
    
	margin-left:340px;
	padding-top:10px;
	padding-left:20px;
	resize:none;
	border-color:transparent;
	background-color:transparent;
	background: url('images/textarea2.gif')  no-repeat;
	width: 678px;
	height: 142px;
	border-width:1px;
       }	

[haku]

You've got a number of problems:

1) You are using an HTML doctype, but have XHTML tags in your code.

2) You are positioning lots of things relatively. This leads to problems like you are seeing. Your layout is entirely broken on a widescreen monitor - it's half out the right side of my screen unless I scroll to the right.

 

Spend some time studying 'floats'. In particular, the 'floatutorial' (google it) is good, even though it's a little old now. Get rid of all the relative positioning. I NEVER use it for positioning an element, ever.