internet-explorer - IE does not scale my images in a fluid layout but instead cuts them off. Also: position:fixed does wild things

Question

I have this fluid layout concept which works kinda okayish in Firefox, opera, chrome, but goes awry when opened wih IE7. I do not have to bother with IE6, but would like to avoid browser-specific CSS files.

The problem is that a) IE does not resize my funky little balls and b) does cut them off at the sides when I make the window smaller horizontally.

the weird thing is that the cutting off does not happen vertically, even if it should be the same.

Take mind that I am a graphic designer, not at all an programmer. My code is probably awful, and I will probably not understand answers too exhaustive or too short...

here is an exerpt of my code:

#body {
height: 100%;
width: 100%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color:white;
font-size:100%;
}



#gesamt {
position: absolute;  
height: 100%;
width: 100%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
min-width:800px;
background-color:yellow;
}

#bg2k {
background-image: url(object23.png);    
background-size: 100%;  
width: 20%;         
height: 100%;           
background-repeat: no-repeat;   /* kein repeat des hintergrunds */
position: absolute;    
bottom: -70%;   
left: 2%;
z-index:8;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}


#bg2l {
background-image: url(object24.png);    
background-size: 100%;  
width: 20%;         
height: 100%;           
background-repeat: no-repeat;   
position: absolute;    
bottom: -70%;  
left: 9%;
z-index:7;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}

#bg2m {

background-image: url(object25.png);    
background-size: 100%;  
width: 20%;         
height: 100%;           
background-repeat: no-repeat;   
position: absolute;    
bottom: -70%;   
left: 16%;
z-index:6;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}

another interesting problem is that, as soon as I say position: fixed with any of my little objects, all hell broke lose, and the layout splattered all over the page. Why?

Oh, and I just found that I never put a # before body. does it matter?