xhtml strict : résultat inattendu
Bonjour,
Je me lance dans la création d'une application intranet php en xhtml strict pour firefox.
Mon code est bien validé par W3C (html + css).
Si je supprime la déclaration du doc type, mon code fonctionne bien.
Si je laisse la déclaration du doc type, mes boites div sont "recroquevillées".
Ou est mon erreur ?
styles.css
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
|
body {
margin: 0;
padding: 0;
}
div {
text-align: center;
margin: 0;
padding: 0;
}
div#menu {
width:100%;
background-color:#00CCFF;
}
div#gauche {
float:left;
width:50%;
background-color:#FF0000;
}
div#gauche_commande {
width:100%;
background-color:#66CC33;
}
div#gauche_filtre {
width:100%;
background-color:#CC99CC;
}
div#gauche_liste {
width:100%;
background-color:#CC11FF;
overflow: auto;
}
div#droit {
float:left;
width:50%;
background-color:#FFCC00;
}
div#droit_commande {
width:100%;
background-color:#FFDD11;
}
div#droit_donnee {
width:100%;
background-color:#FFEE22;
} |
index.html
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
|
<!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" xml:lang="fr" lang="fr">
<head>
<title>Marque-Page AUTO VIADUC</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml" />
<style type="text/css" media="screen">@import "styles.css";</style>
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="afficher();">
<div id="menu">Menu</div>
<div id="gauche">
<div id="gauche_commande">
<input type="button" value='Cacher' onclick="test();"></input>
</div>
<div id="gauche_filtre">Filtre</div>
<div id="gauche_liste">Liste</div>
</div>
<div id="droit">
<div id="droit_commande">Commande</div>
<div id="droit_donnee">Donnee</div>
</div>
</body>
</html> |
script.js
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
|
function afficher()
{
document.getElementById('menu').style.height='40px';
document.getElementById('gauche').style.height=document.body.clientHeight-document.getElementById('menu').offsetHeight+'px';
document.getElementById('gauche_liste').style.height=
document.getElementById('gauche').offsetHeight-
document.getElementById('gauche_commande').offsetHeight-
document.getElementById('gauche_filtre').offsetHeight+'px';
document.getElementById('droit').style.height=document.getElementById('gauche').offsetHeight+'px';
document.getElementById('droit_donnee').style.height=document.getElementById('droit').offsetHeight-document.getElementById('droit_commande').offsetHeight+'px';
}
function test()
{
if(document.getElementById('gauche_filtre').style.height=='0px')
{
document.getElementById('gauche_filtre').style.height='auto';
document.getElementById('gauche_liste').style.height=
document.getElementById('gauche').offsetHeight-
document.getElementById('gauche_commande').offsetHeight-
document.getElementById('gauche_filtre').offsetHeight+'px';
}
else
{
document.getElementById('gauche_filtre').style.height='0px';
document.getElementById('gauche_liste').style.height=document.getElementById('gauche').offsetHeight-document.getElementById('gauche_commande').offsetHeight+'px';
}
} |