White space below website

I have a problem.
Below my website (http://www.i4-it.be) there is a big white space.
But this is not in all browsers, but only in firefox i guess.
Does someone have a solution for this problem?

CODE:

body {
font-family:Tahoma, Geneva, sans-serif;
margin:0;
padding:0;
}

a:link, a:visited, a:hover, a:active; {
text-decoration:none;
}

#body {
width:100%;
height:1000px;;
background-image:url(img/background.gif);
}

#wrapper {
position:relative;
margin:auto;
top:-231px;
width:1024px;
height:100%;
}

/* Header */

#bannerbg {
position:relative;
top:33px;
width:100%;
height:231px;
background-image:url(img/bannerbg.gif);
}

#bannerlogo {
position:relative;
top:26px;
left:170px;
width:120px;
height:245px;
background-image:url(img/logobanner2.gif);
}

/* Navigatie */

#nav {
position:relative;
top:-212px;
left:295px;
width:444px;
height:32px;
}

.home {
width:73px;
height:32px;
float:left;
}

.about {
width:80px;
height:32px;
float:left;
}

.services {
width:94px;
height:32px;
float:left;
}

.portfolio {
width:103px;
height:32px;
float:left;
}

.contact {
width:94px;
height:32px;
float:left;
}

/* Footer */

#bottombg {
margin:0 auto;
position:relative;
top:-309px;
width:100%px;;
height:78px;
background-image:url(img/bottom.gif);
}

#bottom {
margin:0 auto;
position:relative;
top:px;
width:1024px;;
height:78px;
background-image:url(img/bottom.gif);
}

#sitemap {
position:relative;
top:13px;
left:174px;
width:238px;
height:54px;
font-size:9px;
}

#sitemap a:link, a:visited {
color:white;
text-decoration:none;
}

#sitemap a:hover, a:active {
text-decoration:none;
color:#009ee3;
}

#bottomadres {
position:relative;
top:-41px;
left:715px;
width:150px;
height:54px;
font-size:9px;
}

#bottomlogo {
position:relative;
top:-48px;
left:86px;
width:60px;
height:56px;
background-image:url(img/logo.gif);
}

It's caused by the numerous negative top value within your css.

No quick fix to this I don't think. If you set #bannerbg to position:absolute and remove the top setting from #wrapper that's a start, then you need to work through your css and use float, margins and probably a bit more abolute positioning with the aim of removing all the top properties on your main elements.

It's caused by the numerous negative top value within your css.

No quick fix to this I don't think. If you set #bannerbg to position:absolute and remove the top setting from #wrapper that's a start, then you need to work through your css and use float, margins and probably a bit more abolute positioning with the aim of removing all the top properties on your main elements.

and if i use negative values in 'margin-left' or 'margin-top' is that a problem?

There shouldn't really be a need to use negative margins as a general solution to layout. If you're using it to pomove elements up so they are positioned side by side then float is a much better option.

There shouldn't really be a need to use negative margins as a general solution to layout. If you're using it to pomove elements up so they are positioned side by side then float is a much better option.

Oke thank you very much!