Capa exterior no ajusta altura

mariano_donati · #1 (**permalink**) 05/08/2008, 19:26

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.