Problema con % (Moz vs IE)

Hola, tengo un grave problema y es que resulta que IE y Moz me llen diferente los % sobretodo del padding y no se a que se debe...

Código :

* {
padding: 0%;
margin: 0%;
z-index: 1;
}

/* background height */
html {min-height: 100%;height: auto;}

BODY {
font-family: Verdana, Arial;
font-size: 12px; 
color:white;
margin: 6px 0px; 
text-align: center; 
background:#000000 url(images/bg.jpg) no-repeat bottom;
} 

/* links style */
a {color: #CCCCCC; text-decoration: none; background:transparent}
a:hover {color:#999999; text-decoration: none; background:transparent}

.text a {color: #CCCCCC; text-decoration: none; background:transparent; font-weight:bold}
.text a:hover {color:#999999; text-decoration: none; background:transparent; font-weight:bold}

/* headers */
h1, h2, h3, h4, h5, h6{margin:0px;}
h2{
text-align:left;
margin:0px;
font-size:2.17em;
}
h3{ 
background-color:#FF0066; 
text-align:left; 
padding: 4px;
margin:0px;
font-weight:bold;
font-size: 1.50em;
}
h4{
text-align:left;  
padding: 0px; 
margin-top:10px;
font-size: 1.33em;
}
h5{
text-align:right;  
padding: 0px; 
margin:2px 0px 8px 0px;
font-size: 1.17em;
}
h6{
text-align:right;  
padding: 0px; 
margin:2px 0px 8px 0px;
font-size: 0.83em;
}

/* container style */
#container{
width:54%;
margin: auto;  
} 

/* head style */
#head{
width:auto; 
margin: auto;
height:200px; 
text-align:center;
}

/* body style */
#body{
margin: 1% 0%;
padding:0%;
} 

/* centre div style */
#center{
width:auto; 
margin:0% 20.8%;
padding:0%;
}

#lateral, #update{
width: 17.8%;
margin:0px;
padding: 1%;
}

/* div update right*/
#update{
text-align:left;
float:right;
clear:right;
background:#FA6494 url(images/bgright.jpg) repeat-x top;
font-size:10px;
display: inline;
}
#update ul{
margin:0px;
padding:0px;
list-style:none;
}
#update li{
padding:0px;
margin-bottom:4px;
display:block;
width: auto;
}

/* div lateral right*/
#lateral{
text-align:left;
float:right;
background:#FA6494 url(images/bgright.jpg) repeat-x top;
color:white;
font-size:10px;
display: inline;
}
#lateral ul{
margin:0px;
padding:0px;
list-style:none;
}
#lateral li{
padding:0px;
margin-bottom:14px;
display:block;
width: auto;
}

/* menu left */
#menu{
width: 19.8%;
margin:0px;
float:left;
background:#FA6494 url(images/bgmenu.jpg) no-repeat top;
text-align: left;
color:white;
display: inline;
}
#menu ul li{
margin:0px;
padding: 0px;
list-style-type: none;
}
#menu li a {
padding: 4px;
margin:2% 0%;
background-color:transparent;
color: white; 
font-size:14px; 
font-weight: bold;
text-decoration: none; 
display: block;
}
#menu li a:hover {
background:#FF6699 url(images/bgmenub.jpg) repeat center;
color:white;
}

/* menu profile */
#profile{
width:404px;
text-align: center;
padding:0px;
margin:0px;
}
#profile ul {
margin:0px;
padding: 0px;
list-style-type: none;
}
#profile li {
display: inline;  
margin:0px;
padding:0px;
width:auto;
white-space:nowrap;
}

/* text style and list */
.text{
width:auto; 
margin-bottom:2%;
text-align:justify;
padding:2%; 
background:url(images/bgtext.jpg) repeat-y center;
line-height:20px;
}
.text ul{
margin:0px;
padding:0px;
}
.text li{
list-style:none;
margin:6px 0px;
padding:0px;
}

/* inline style list */
#center .inline{
font-size:10px;
text-align:center;
}
.inline{
margin:0px;
padding:0px;
font-size:9px;
}
.inline ul{
margin:4px;
padding:0px;
text-align:center;
}
.inline li{
list-style:none;
margin:0px;
padding:0px;
display:inline;
}
.inline li a{
margin:0px;
padding:0px;
}

/* credit class */
.credit{
font-size:10px;
text-align: right;
}

/* p style */
p {
margin:22px 0px;
}

Si lo queréis comprobar: http://www.pinkujisatsu.cjb.net/
Gracias

Sigo sin descubrir la posible causa del problema y me está volviendo loco...
No se porque razón IE lee diferente los porcentajes...

Mi problema es el siguiente, es un diseño de 3 columnas:
#container tiene un width de 54%
#center un márgen izquierdo y derecho de 20,8%
Por lo tanto las dos columnas de sus lados deben tener uno de 19,8€ dejando un 1% de espacio.
Por lo tanto #menu tiene 19,8% pero la columna de la derecha está formada por dos div's (una arriba y a la otra abajo)
estás han de tener padding, tiene un 1% de padding por lo que su tamaño será de 17,8% dejando el 1% de espacio.

/* centre div style */
#center{
width:auto;
margin:0% 20.8%;
padding:0%;
}

/* div update & lateral right*/
#lateral, #update{
width:17.8%;
margin:0%;
padding:1%;
display:block;
text-align:left;
float:right;
background:#FA6494 url(images/bgright.jpg) repeat-x top;
color:white;
font-size:0.83em;
}

/* div update right*/
#update{
clear:right;
display: inline;
}
#update ul{
margin:0px;
padding:0px;
list-style:none;
}
#update li{
padding:0px;
margin-bottom:4px;
display:block;
width: auto;
}

/* div lateral right*/
#lateral{
display: inline;
}
#lateral ul{
margin:0px;
padding:0px;
list-style:none;
}
#lateral li{
padding:0px;
margin-bottom:14px;
display:block;
width: auto;
}

/* menu left */
#menu{
width: 19.8%;
margin:0px;
float:left;
background:#FA6494 url(images/bgmenu.jpg) no-repeat top;
text-align: left;
color:white;
}
#menu ul li{
margin:0px;
padding: 0px;
list-style-type: none;
}
#menu li a {
padding: 2%;
margin:2% 0%;
background-color:transparent;
color: white;
font-size:14px;
font-weight: bold;
text-decoration: none;
display: block;
}
#menu li a:hover {
background:#FF6699 url(images/bgmenub.jpg) repeat center;
color:white;
}

Firefox perfecto pero IE no muestra el 1% de padding....
Por qué?

Gracias

Lo más seguro es que sea por la interpretación del modelo de cajas de IE, y que el % se basa en el tamaño de la ventana, una ventana podria ser mas grande (mas barras, menos barras, etc).

Hola gracias por contestar NEO_JP.
Pero creo que no te he entendido perdona. Porque IE me lee diferente el %, es decir en Firefox se ve el 1% de padding aplicado mientras que en IE no aparece ningún padding.

Tiene solución?

Gracias

A ver, no he mirado el problema, pero para explicartelo rapidamente... Para IE un elemento bloque significa 100% + padding + border y no debería ser sino el 100% del tamaño del elemento padre del mismo. Así que IE6 está renderizando mal e IE7 reproduce este error sólo en algunos casos con lo que el 100% del elemento sobrepasa el tamaño y todo se rompe. De todas formas en el resto de navegadores está casi totalmente correcto, pero pixels y porcentajes nunca se han llevado bien (no quiere decir que no se usen).

Procura que el padding de los elementos contenedores no sea en % sino en px, el resto, juegalo con inteligencia

Fantástico, muchas gracias por la ayuda Capt.Mahou.

Ya está solucionado.