I also had this problem. Studying it I realized that:
When we work in quirks mode the elements html and body start by default with the height of the browser window. But when we tell the browser that we are working with XHTML strict, the elements html and body start by default with the height required to contain all the visible elements of the page. For this example, little more than 290px (because of the padding and margin standards).
So I sought something that would inform the actual height of the browser window. I came to a satisfactory result. Also I removed onresize of body of xhtml, since this attribute is no longer accepted. Finally, I separated the code (partially), so that he could be more elegant. Next I want to separate completely style, structure and script.
Below my code:
<b>irock.html</b>
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>iRock - A Rocha virutal de estimação</title>
<script type="text/Javascript" src="cookies.js"></script>
<script type="text/Javascript" src="irock.js"></script>
<link rel="stylesheet" type="text/css" href="irock.css" />
</head>
<body onload="resizeRock(); greetUser();">
<div>
<img id="rockImg" src="rock.png" alt="iRock" onclick="touchRock(); rochaPrecisaDeAtenção();"/>
</div>
</body>
</html>
</div>
<b>irock.css</b>
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'>div {
text-align: center;
margin-top: 100px;
width
}
img {
cursor: pointer;
}
</div>
<b>irock.js</b>
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'>var userName;
window.onresize = resizeRock;
function greetUser(){
if (navigator.cookieEnabled)
userName = readCookie("irock_username");
if (userName)
alert("Olá " + userName + " senti a sua falta.");
else
alert("Olá, eu sou a rocha de estimação, a iRock.");
}
function resizeRock() {
document.getElementById('rockImg').style.height = (window.innerHeight-100)*0.9 + "px";
}
function touchRock(){
if(userName) {
alert("Eu gosto de atenção " + userName + ". Obrigada.");
}
else {
userName = prompt("Qual o seu nome?", "Entre com o seu nome aqui, por favor.");
if (userName){
alert("Prazer em conhecê-lo, " + userName + ".");
document.getElementById("rockImg").src = "rock_happy.png";
if (navigator.cookieEnabled)
writeCookie("irock_username", userName, 5 * 365);
else
alert("Desculpe" + username + ", mas sem cookies eu tenho dificuldades de me lembrar das coisas. Ative os cookies em seu navegador para uma experiência mais realística");
}
}
}
function rochaPrecisaDeAtenção() {
setTimeout("document.getElementById('rockImg').src = 'rock.png'",5*60*1000);
}
</div>
<b>Significant changes in the script:</b>
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'>
window.onresize = resizeRock;
(...)
function resizeRock() {
document.getElementById('rockImg').style.height = (window.innerHeight-100)*0.9 + "px";</div>
PS: The Xhtml and CSS validated.
________________________
Também tive este problema. Estudando-o percebi que:
Quando trabalhamos em quirks mode os elementos html e body iniciam por padrão com a altura da janela do navegador. Porém quando informamos ao navegador que estamos trabalhando com XHTML strict, os elementos html e body iniciam por padrão com a altura necessária para conter todos os elementos visíveis da página. No caso deste exemplo, pouco mais do que 290px (por causa dos padding e margin padrões).
Desta forma busquei algo que informasse a altura real da janela do navegador. Cheguei a um resultado satisfatório. Também retirei o onresize do corpo do xhtml, uma vez que este atributo não é mais aceito. Por fim, separei os códigos (parcialmente), para que ficasse mais elegante. Pretendo em breve deixar separar totalmente estilo, estrutura e ação.
A seguir meus códigos:
<b>irock.html</b>
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>iRock - A Rocha virutal de estimação</title>
<script type="text/Javascript" src="cookies.js"></script>
<script type="text/Javascript" src="irock.js"></script>
<link rel="stylesheet" type="text/css" href="irock.css" />
</head>
<body onload="resizeRock(); greetUser();">
<div>
<img id="rockImg" src="rock.png" alt="iRock" onclick="touchRock(); rochaPrecisaDeAtenção();"/>
</div>
</body>
</html>
</div>
<b>irock.css</b>
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'>div {
text-align: center;
margin-top: 100px;
width
}
img {
cursor: pointer;
}
</div>
<b>irock.js</b>
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'>var userName;
window.onresize = resizeRock;
function greetUser(){
if (navigator.cookieEnabled)
userName = readCookie("irock_username");
if (userName)
alert("Olá " + userName + " senti a sua falta.");
else
alert("Olá, eu sou a rocha de estimação, a iRock.");
}
function resizeRock() {
document.getElementById('rockImg').style.height = (window.innerHeight-100)*0.9 + "px";
}
function touchRock(){
if(userName) {
alert("Eu gosto de atenção " + userName + ". Obrigada.");
}
else {
userName = prompt("Qual o seu nome?", "Entre com o seu nome aqui, por favor.");
if (userName){
alert("Prazer em conhecê-lo, " + userName + ".");
document.getElementById("rockImg").src = "rock_happy.png";
if (navigator.cookieEnabled)
writeCookie("irock_username", userName, 5 * 365);
else
alert("Desculpe" + username + ", mas sem cookies eu tenho dificuldades de me lembrar das coisas. Ative os cookies em seu navegador para uma experiência mais realística");
}
}
}
function rochaPrecisaDeAtenção() {
setTimeout("document.getElementById('rockImg').src = 'rock.png'",5*60*1000);
}
</div>
<b>Alterações importantes no script:</b>
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'>
window.onresize = resizeRock;
(...)
function resizeRock() {
document.getElementById('rockImg').style.height = (window.innerHeight-100)*0.9 + "px";</div>
PS: O Xhtml e as CSS foram validados.
