No internet explorer quando vou adicionando texto na div contentBox ela vai se redimensionando automaticamente na altura e tambem a div loginBox se redimensiona junto a div contentBox.
Mas nos outros navegadores isso nao esta funcionando corretamente.
aqui esta meu codigo:
meu HTML index.html:
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" media="" href="css/login.css">
<script language="javascript" src="js/curvycorners/curvycorners.src.js"></script>
<title></title>
</head>
<body>
<div id="mainBox">
<div id="topBox">
</div>
<div id="auxiliarBox">
<div id="loginBox">
</div>
<div id="contentBox">
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
sdhkga<br>
</div>
</div>
<div id="footerBox">
</div>
</div>
</body>
</html>
Meu CSS login.css:
CODE
body{
background:#0077BF;
padding: 0px;
margin: 0px;
}
form{
padding:0px;
margin:0px;
}
/* Propriedades da DIV principal da aplicação onde todas outras DIVS estão dentro dela. */
#mainBox{
min-height:100%;
height: auto;
left: 50%;
margin-left: -42.5%;
padding-bottom: 4px;
padding-top: 4px;
width: 85%;
position: absolute;
}
* html #mainBox{
height: 100%;
}
/*arredondar as bordas do topBox*/
#topBox{
/*para o explorer*/
-webkit-border-top-left-radius: 7px;
-webkit-border-top-right-radius: 7px;
/*arredondar borda no mozilla*/
-moz-border-radius-topleft: 7px;
-moz-border-radius-topright: 7px;
}
/* Propriedades da DIV do topo */
#topBox{
background: #ffffff;
height:84px;
width:100%;
position: relative;
}
#auxiliarBox{
width: 100%;
min-height: 85%;
height: auto;
margin-top: 2px;
margin-bottom: 2px;
position: relative;
}
* html #auxiliarBox{
height: 85%;
}
/* Propriedades da Div do menu */
#loginBox{
background: #ffffff;
float:left;
height: auto;
min-height: 100%;
text-align: left;
width:23.8%;
}
* html #loginBox{
height: 100%;
}
/* Propriedades da Div onde fica o conteudo */
#contentBox{
background-color: #ffffff;
left: 24%;
float:right;
height: auto;
min-height:100%;
width: 76%;
}
* html #contentBox{
height: 100%;
}
/*arredondar as bordas do rodape*/
#footerBox{
/*para o explorer*/
-webkit-border-bottom-left-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
/*arredondar borda no mozilla*/
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
}
/*Propriedades do RODAPÉ*/
#footerBox{
background: #ffffff;
clear: both;
height: 25px;
width: 100%;
}
#footerPos{
margin-top:3px;
}
.footerSpan{
top: 3px;
color: black;
font-size: 9pt;
float: right;
margin-right: 10px;
}
Espero ajuda.
Desde já agradeço a todos.