Resolucion 800x600, o 1024 se me desmonta todo

[martines]

Buenas, cuando cambio la resolucion y pongo una inferior a 1024 se me desmonta todo, la foto del head, el menu y pie se me corta, pero cuando pongo otra resolucion mas grande 1024 todo funciona perfectamente. En internet explorer, el menu se me desplaza hacia la izquierda. Como puedo solucionar todo esto?

Código PHP:

  body {background-color: #91aefe; 
     margin:0px; 
    } 
 
#head { 
      margin:0px;  
      margin-top:0px; 
      background-image: url("../files/head.jpg"); 
      background-position:  left; 
      background-position: relative; 
      background-repeat: no-repeat; 
      height: 140px; 
      width: auto; 
      } 
 
#head p { 
     text-align: center; 
     color: #fff; 
     font: 120% "Trebuchet MS", Arial, Helvetica, sans-serif; 
     font-weight: bold; 
     font-style: oblique; 
     padding-top: 40px; 
     padding-left: 570px; 
     margin-top: 0px; 
      
       } 
       
#menu {   
        width: auto;  
        padding: 0px;   
        float:right;  
        padding:0px; 
        height:auto; 
        font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif; 
        font-weight: bold; 
        background-image: url("../files/menu.jpg"); 
        background-position: relative; 
        background-repeat: no-repeat; 
        height: 40px; 
        margin-top:0px; 
        position: relative; 
                } 
         
#menu ul, li { list-style-type: none; 
        } 
 
#menu ul  
        { width:auto; 
          margin:auto; 
        } 
         
#menu li {   
         display: inline;   
         position:relative; 
          
         }   
 
/* separacio entre boto          
#menu li+li a { 
         border-left: 1px solid #FFF;  
          } 
           
*/           
#menu a {   
      color: #fff; 
      text-decoration: none;   
      text-align: center; 
      width: 1%;  
      margin-left: 130px; 
      float: left;   
      padding: 7px;  
      display: block;  
      outline:none; 
      cursor:pointer; 
      position: relative; 
        }  
 
#menu a:hover { /* background: #FFFFFF; fondo cuadro*/   
               color:#000000; 
             } 
 
 
#contenido { border: 3px solid #FF0000;  
             width:850px;  
             height:600px; 
             padding:3px;  
             margin-top:50px;  
             margin-left: 180px; 
             margin-bottom: 20px; 
             float: left;  
             position: relative; 
             } 
 
#pie { 
     width:auto;  
     background-image: url("../files/pie.jpg"); 
     background-position: relative; 
     background-repeat: no-repeat; 
     height:80px;  
     margin-top:0px;  
     clear: both; 
     padding: 1px; 
     position: relative; 
     padding-bottom: 0px; 
     } 
      
#pie p { 
     text-align: center; 
     color: #fff; 
     font: 120% "Trebuchet MS", Arial, Helvetica, sans-serif; 
     font-weight: bold; 
     margin-bottom: 0px; 
     position: relative; 
     }