Height con porcentaje crossbrowser

[monicapo]

Pues vereis, tengo un estilo para una capa con lo siguiente:

Código:

position: relative;
border:3px solid #cdc6bc;
margin:auto;
margin-top:20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
width:95%;
height:83%;
min-height:83%;
display:none;
background:#edecea;

Bien, en chrome me aparece un cuadro grande(83%). Pero en firefox y en IE me aparece un cuadro muy pequeño, que serían como 35px de alto más o menos.

Por otro lado, si el height lo cambio a pxs, puedo poner height:600px; y entonces si que me coge la altura. Entonces es algo del porcentaje, que no funciona. ¿Alguien sabe si pongo algo mal?

[codeams]

Todo luce bien pero al ser pocentajes quizá el que se esta mostrando diferente en ffox y en IE es el elemento padre.

Si pudieses mostrarnos el html de esa parte del documento y sus respectivos estilos nos será más fácil ayudarte saludos c:

[monicapo]

CSS del HTML y el BODY

Código:

html, body {
	background: #edecea url('fondo.png');
	color: #000;
	font: 10px Verdana;
	margin: 0;
	padding: 0;
	height:100%;		
}

La capa que contiene todo es:

Código:

#contenedor {
	background:#edecea;
	display: table;
	height:100%;
	width:100%;
	margin:auto;
	border:0px solid #000;
}

Y dentro de ese contenedor está la ventana principal junto con otras partes:

Código:

#vtn_principal {
	position:relative;
	float:left;
	width:80%;
	height:85%;
	background:#edecea;	
}

Y por fin, dentro de la ventana principal está la capa que me da problemas.
Es un poco lío.

[hackjose]

Si quieres usar % en height entonces debes usar position:absolute;

saludos

[monicapo]

Ha ocurrido una cosa.

He quetado la propiedad display:table del contenedor y ya se ve bien en todos los navegadores, incluso manteniendo el position:relative con los porcentajes. El problema es que no se porqué.