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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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';
        }
    }