I'm having a problem, which already searched the internet but can not solve. I have an iframe, and inside I have a page that is loading the following CSS.
html, body {
position:relative;
height:100%;
}
.c1{
float:left;
text-align:left;
margin-top:1px;
margin-bottom:1px;
width:100%;
}
.c2{
float:left;
text-align:left;
margin-top:1px;
margin-bottom:1px;
width:50%;
}
.cvalue{
float:left;
width:40%;
padding-right:3px;
text-align:right;
}
.titulo{
DISPLAY: inline-block;
padding-left:5%;
}
.abaA{
display:inline-block;
text-align:center;
position:relative;
margin-top:1px;
width:100px;
border:#000 solid 1px;
border-bottom:0px;;
background-color:#F9F9F9;
}
.abaA:hover {
background-color: #F9F9F9;
cursor: pointer;
}
.abaF{
display:inline-block;
text-align:center;
position:relative;
margin-top:1px;
width:100px;
border:#000 solid 1px;
border-bottom:0px;
background-color:#EEE;
}
.abaF:hover {
background-color: #F9F9F9;
cursor: pointer;
}
.areaA{
float:left;
position:relative;
border:#000 solid 1px;
border-top:0px;
background-color:#F9F9F9;
}
.areaF {
float:left;
position:relative;
border:#000 solid 1px;
border-top:0px;
display:none;
background-color:#F9F9F9;
}
And the following HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<script language="JavaScript" type="text/javascript" src="/csp/broker/cspxmlhttp.js"></script>
<script language="JavaScript" type="text/javascript" src="/csp/broker/cspbroker.js"></script>
<script language="JavaScript" type="text/javascript" src="/csp/cratera/sys/function.js"></script><script language="JavaScript">cspHttpServerMethod("KJnjcEnDVCs$h8WvTvpH0LQbuqWLNC_moK_PLd1scC8cNx6fZxqGz_mS6Q0_HRLRO2oUxExyIGwafKPhULXcfw--")</script>
<link rel="stylesheet" type="text/css" href="/csp/cratera/themes/default/css/style.css">
<title>Cadastro de Empresa</title>
<script language="JavaScript">
function Salvar(){
$CR.Submit("xiHqkWth9sV+2005/P0B5LY6k4AfsjV4hbGb3cevM8A",$("form"));
}
function Consultar(){
$CR.Submit("tD3yLZP6yievtRoRMZLtjvnyw4Udr3eWUQNev/osmtg",$("form"));
}
function Novo(){
$CR.ClearAll($("form"));;
$CR.Submit("4evrj0yE4oGqBy1wKeKE+RJP0R4192anMoOcSNx5gJE",$("form"));
}
</script>
</head>
<body>
<div class="titulo">Cadastro de Empresa</div><br><hr size="1" style="margin:0px">
<div class="c1" style="text-align:right;">
<input id="btnCad1" name="btnCad1" onClick="Salvar();" type="button" value="Cadastrar"></input>
<input id="btnNov1" name="btnNov1" onClick="Novo();" type="button" value="Novo"></input>
<input id="btnCon1" name="btnCon1" onClick="Consultar();" type="button" value="Consultar"></input>
</div>
<br>
<span class="abaA" id="aba.endereco.cad" onClick="mudarAba(this);">Cadastro</span>
<span class="abaF" id="aba.endereco.ent" onClick="mudarAba(this);">Entrega</span>
<span class="abaF" id="aba.endereco.cob" onClick="mudarAba(this);">Cobrança</span>
<br>
<div class="areaA" id="area.endereco.cad" style="width:100%;height:90%;">
<br>
<form id="form">
<!-- ALL FORM CODE HERE -->
</form>
</div>
<div class="areaF" id="area.endereco.cob" style="width:100%;height:90%;">
<br>
Hello!
</div>
<div class="areaF" id="area.endereco.cob" style="width:100%;height:90%;">
<br>
Hello!
</div>
</body>
</html>
As can be seen in the settings tab (class = "abaA" and class = "abaF") I am not able to put the "height: 90%." It works in Mozilla and Internet Explorer, but in Chrome and Safari - both important to my project - it does not work. I have looked on the internet, and many people have this problem, and none of the solutions suggested worked for me.
Appreciate any help. Thanks