Anzitutto noto che usi molta formattazione HTML (es: align="center" width="100%"): non e` buona cosa, dato che potrebbe andare in conflitto con la formattazione CSS, e browser diversi risolvono i conflitti in modo diverso: in linea di massima quando si usano i CSS si deve eliminare tutta la formattazione HTML.

Vedo anche che usi la DTD XHTML 1.0 Transitional: probabilmente e` il tuo editor/CMS che lo fa, ma questo porta ad interpretazioni diverse i browser IE, e questo complica la formattazione (tant'e` che hai ben due file CSS per IE - e magari non hai ancora testato IE8 e ie9)

Non vedo la formattazione delle dimensioni dei tag <html> e <body>: in mancanza, i valori % di wrapper non hanno significato.
Prova a mettere
html, body {
width: 100%;
height: 100%; /* vedi domande sotto */
}

Ed ecco alcune domande (che richiedono un ripensamento):
1. Perche` il wrapper e` alto SOLO 100%? Dovrebbe potersi allungare se la pagina e` piu` lunga.
Prova a togliere l'altezza del wrapper, lasciandolo in automatico.

2. in quale brower stai testando? Io non ho guardato i CSS per IE - ragiono solo sui brwoser standard

3. Parli di wrapper, ma nella pagina si chiama mainwrapper: sei sicuro di aver usato nomi coerenti?

4. la formattazione di maninwrapper e` attaccata al blocco precedente: prova a metterlo all'inizio riga, o almeno lascia uno spazio prima del # (non sono sicuro di cosa dica lo standard a proposito di mettere il # attaccato al } precedente)

E comunque in una pagina cosi` complessa, preferirei vedere piu` ordine: non tanto per il computer (che si fa uno suo schema interno), ma per i programmatori umani che devono poi andar dietro a tutte queste cose: la pulizia del codice evita molti errori.