tekst disappears behind footer

Hello,

I'm building a new website.

In this website the footer has to be below of the screen accept when there is enough text, then it should be just below the screen.

I got this part working.

But when somebody has a smallscreen or uses a low resolution. The text disappears behind the footer and there is no scrollbar vissible.
Well accept in Internet Explorer, there it works fine, but not in Firefix or Google.

this is the url:
http://www.jcsl.nl/banner/index.php?lan=NL&pagina=geluid

Sorry for the popup, but this is to warn visiters that this webiste in under construction and that they should use another page.

This is the relevant css:


#container {
min-height: 100%;
position: relative;
font: normal small Trebuchet MS, Arial, Helvetica, sans-serif;
margin: 0 0 -220px 0;
}

#main {
margin: 0px auto;
text-decoration: none;
width: 1000px;
margin: 0 auto 220px auto;
}

#footer {
width: 100%;
margin: 0px;
height: 220px;
position: absolute;
bottom: 0; /* heel belangrijk */
background: #FFFFFF;

}


I hope someone can help me with this, and sory for my bad English.

Hello jscoolen,
It seems to be working fine on my end. I looked at it with FF17 and IE9 with no issues.

So the text is behind the footer? You could try setting a 'z-index' for the text to appear over top of the footer. I'm sorry if this doesn't answer your question, I'm having a hard time understanding.

Edit: By the way, I am on my iPhone right now and I can see the text just fine.