Foros del Web » Creando para Internet » CSS »

Capa exterior no ajusta altura

Estas en el tema de Capa exterior no ajusta altura en el foro de CSS en Foros del Web. Buenas noches, nuevamente. Tengo un problema ajustando la altura de una capa exterior en IE. En Firefox me toma la altura que le doy al ...
  #1 (permalink)  
Antiguo 05/08/2008, 20:26
 
Fecha de Ingreso: marzo-2005
Mensajes: 1.418
Antigüedad: 12 años, 8 meses
Puntos: 9
Capa exterior no ajusta altura

Buenas noches, nuevamente. Tengo un problema ajustando la altura de una capa exterior en IE. En Firefox me toma la altura que le doy al atributo height, es más, puedo achicar tanto la altura como así lo desee, sin importar el tamaño de las capas interiores. En IE no funciona así. La altura se ajusta hasta cierto punto y después de ese punto no puedo achicarla más, por lo que me queda un espacio en blanco que ensucia la estética de la página. Además, en IE me queda un espacio enorme entre el div con Id DIV_CONTENT_MIDDLE y el DIV_CONTENT_RIGHT, pero esto como verán es solo en Explorer. Sin embargo lo que no entiendo es que en mi servidor local la página se muestra igual en ambos exploradores. Este es el link de la página:

http://espprog.net63.net/index-1.html

Lo que les digo es en la parte de INICIAR SESION, el espacio que queda entre el link Recuperar contraseña y el borde del div contenedor.
Este es el código:

CSS
Código:
DIV
{
    border: solid 1px black;
    display: table;
}

INPUT 
{
    font-family: tahoma, arial, helvetica;
    color: #666666;
    width: 90px;
    height: 11px;
}

#DIV_CONTENT_RIGHT
{
    width: 180px;
    height: 600px;
    float: right;
}

#DIV_USER_LOGIN
{
    width: 180px;
    height: 110px;
    margin-top: 10px;
}

#DIV_USER_LOGIN .TITLE
{
    margin-bottom: 6px;
    padding-left: 10px;
}

#DIV_USER_LOGIN .FORM_INPUT
{
    float: right;
    padding-right: 14px;
    margin-top: 4px;
}

#DIV_USER_LOGIN .FORM_BUTTON
{
    text-align: right;
    padding-right: 14px;
}

#DIV_USER_LOGIN #DIV_RETRIEVES_PASSWORD
{
    display: block;
    padding-right: 14px;
    margin-top: 4px;
}

#DIV_LATEST_NEWS
{
    width: 180px;
    height: 190px;
    margin-top: 10px;
}

#DIV_CONTENT_MIDDLE
{
    width: 562px;
    height: 600px; 
    float: left;
}

#DIV_WELCOME
{
    width: 562px;
    height: 120px;
}

#DIV_CONTENT_MIDDLE_MID
{
    width: 562px;
}

#DIV_CONTENT_MIDDLE_MID #DIV_SEARCH
{
    width: 269px;
    height: 80px;
    float: left;
}

#DIV_CONTENT_MIDDLE_MID #DIV_INFO
{
    width: 289px;
    height: 80px;
    float: right;
}

#DIV_QUICK_NAV
{
    width: 562px;
    height: 137px;    
}

.TITLE
{
    font-family: Verdana;
    font-weight: bold;
    font-size: 14px;
    color:#006699;
    display: block;
}

.FORM_INPUT 
{
    color: #6699CC;
    display: block;
}

.FORM_BUTTON
{
    display: block;
}
HTML
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="Styles/main.css"/>
<link rel="stylesheet" type="text/css" href="Styles/index-1.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>
<body>
<div id="DIV_MAIN">
    <div id="DIV_CONTENT_MIDDLE">
        <div id="DIV_WELCOME">
        </div>
        <div id="DIV_CONTENT_MIDDLE_MID">
            <div id="DIV_SEARCH">
            </div>
            <div id="DIV_INFO">
            </div>
        </div>
        <div id="DIV_QUICK_NAV">
        </div>
    </div>
    <div id="DIV_CONTENT_RIGHT">
        <div id="DIV_USER_LOGIN">
            <form>
                <div class="TITLE">
                    Iniciar Sesi&oacute;n
                </div>
                <div class="FORM_INPUT">
                    Usuario&nbsp;<input type="text" name="usrname"/>
                </div>
                <div class="FORM_INPUT">
                    Contrase&ntilde;a&nbsp;<input type="password" name="pass"/>
                </div>
                <div class="FORM_BUTTON">
                    <img src="Images/Login.gif" onmouseover="this.style.cursor='pointer'"/>
                </div>
                <div id="DIV_RETRIEVES_PASSWORD">
                    <a href="#" class="LINK_1">Recuperar contrase&ntilde;a</a>
                </div>
            </form>
        </div>        
        <div id="DIV_LATEST_NEWS">
        </div>
    </div>
</div>
</body>
</html>
EDITADO
-----------
Arrglado el espaciado entre DIV_CONTENT_MIDDLE y DIV_CONTENT_RIGHT, solo me falta arreglar el problema del espaciado entre el link y el borde del div.
__________________
Add, never Remove

Última edición por mariano_donati; 05/08/2008 a las 20:33
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:35.