[XHTML] XHTML -> IE qui fait des siennes!

**onet** · 19/03/2007, 22h27

Bon, une fois n'est pas coutume... IE fait parlé de lui... J'ai un mini site valide XHTML 1.0 stricte. Sous FF, c'est parfais, mais sous IE 7.0, il me décalle mes li sur la gauche, et surtout, me "bouffe" une poartie de mon texte.

Quelqu'un aurait une idée autre que celle de devoir faire un second CSS juste pour IE?

L'url:
http://www.bilan-consultation.ch

Onet qui s'arrache les cheveux...

**blueice** · 20/03/2007, 09h36

Pour commencer cet en-tête devrait être meilleur :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

Ensuite essaye de remettre à plat ton menu, je vois que tu utilises un margin négatifs... toujours faire au plus simple...

**onet** · 20/03/2007, 11h36

J'avoue que mon entete est pas top. Je vais la modifier.

Le souci des marges négative, c'est que si je ne les mets pas, j'ai trop de marges sur le coté (sous FF en tout cas), et mon menu est très très moche :s. Donc ca, je ne voudrais pas spécialement le modifier !

Onet

**Samyhijodelaluna** · 20/03/2007, 11h43

Ca serait possible d'avoir le code (du css au moins)?

**onet** · 20/03/2007, 12h00

Envoyé par Samyhijodelaluna

Ca serait possible d'avoir le code (du css au moins)?

Tiens, un développeur qui n'a pas Firebug :p

Pas de souci:

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"xhtml11.dtd">
 
<html>
<head>
  <title> Bilan-consultation.ch </title>
  <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
  <link rel="stylesheet" type="text/css" href="style.css" /> 
</head>
<body>
<div id="racine"> 
    <div id="carre_haut"></div>
    <div id="titre">Nos bilans psychologiques</div>
    <div id="menu">
    <ul>
        <li><a href="index.html">Accueil</a></li>
        <li><a href="presentation.html">Pr&eacute;sentation</a></li>
        <li><a href="demande.html">Votre demande</a></li>
        <li><a href="bilan.html">Nos bilans psychologiques</a></li>
        <li><a href="contact.html">Informations et contacts</a></li>
    </ul>
    </div>
    <div id="contenu">
        <h3><img src="image/carre-puce.png" alt="" /> Le bilan psychologique</h3>
        Nos bilans psychologiques s'adressent principalement &agrave; des enfants et des adolescents entre 3 et 16 ans. Toutefois, il nous est possible 
        d'intervenir aupr&egrave;s d'enfants plus jeunes ou plus &acirc;g&eacute;s sous certaines conditions et en fonction de la sp&eacute;cificit&eacute; de la demande. Un bilan 
        psychologique complet permet de r&eacute;pondre &agrave; un &eacute;ventail de questionnements sur le fonctionnement de l'enfant &agrave; diff&eacute;rents niveaux : cognitif, 
        relationnel et affectif. Il offre un regard pr&eacute;cis et complet sur le d&eacute;veloppement de l'enfant, sur ses ressources et sur ses faiblesses. Il 
        permet de mettre en lumi&egrave;re des difficult&eacute;s sp&eacute;cifiques du d&eacute;veloppement et le cas &eacute;ch&eacute;ant de poser un diagnostique. Les r&eacute;sultats des diff&eacute;rents 
        tests et entretiens nous permettent d'orienter l'enfant et ses parents vers la prise en charge la plus ad&eacute;quate.
        <br /><br />
        <h3><img src="image/carre-puce.png" alt="" /> D&eacute;roulement du bilan</h3>
        Nos bilans se d&eacute;roulent sur 4 &agrave; 6 s&eacute;ances en fonction de l'&acirc;ge de l'enfant et de la sp&eacute;cificit&eacute; de la demande. Nous rencontrons tout d'abord 
        l'enfant et ses parents ensembles afin d'analyser leur demande et d'&eacute;tablir une anamn&egrave;se. Ensuite, nous voyons l'enfant seul pour lui faire passer 
        diff&eacute;rents tests. Dans la plupart des situations et uniquement sur accord des parents, nous contactons les autres professionnels en relation avec 
        l'enfant (enseignant, p&eacute;diatre, logop&eacute;diste, ...) afin qu'ils nous transmettent &agrave; leurs tours leurs observations. Finalement, lors d'une derni&egrave;re 
        rencontre, nous restituons &agrave; l'enfant et &agrave; ses parents nos r&eacute;sultats et discutons des solutions qui peuvent &ecirc;tre envisag&eacute;es. Un rapport &eacute;crit leur 
        est remis &agrave; ce moment. Nous fournissons &eacute;galement un rapport destin&eacute; aux professionnels (enseignant, p&eacute;diatre, logop&eacute;diste, ...) si les parents le 
        souhaitent. 
        <br /><br />
        <h3><img src="image/carre-puce.png" alt="" /> Les entretiens et les tests</h3>
        Parall&egrave;lement aux entretiens cliniques, nous utilisons une large palette d'instruments psychologiques standardis&eacute;s nous permettant d'investiguer 
        diff&eacute;rents domaines du fonctionnement psychique de l'enfant et de r&eacute;pondre aux demandes des parents. 
        <br /><br />
        <ul>
            <li>Les domaines cognitifs et neuropsychologiques qui permettent d'&eacute;valuer le niveau (QI) ainsi que le fonctionnement intellectuel de l'enfant 
            (WISC-IV, NEPSY, Test de la Figure complexe de Rey, dessin du bonhomme de Goodenough, ...)</li>
            <li>Le domaine attentionnel qui investigue la capacit&eacute; d'attention/concentration ainsi que l'impulsivit&eacute; (TEA-ch, test d'appariement d'images, 
            questionnaire de Conners, test de m&eacute;morisation des 15 signes, test de m&eacute;morisation des 15 mots,...)</li>
            <li>Le domaine affectif, relationnel et comportemental (TAT, CAT, &eacute;chelle d'anxi&eacute;t&eacute; R-CMAS, &eacute;chelle de d&eacute;pression MDI-C, SDQ, dessin de 
            famille, dessin du bonhomme, dessin &agrave; &eacute;pisode, Dame de FEY, ...</li>
            <li>Le domaine scolaire et les acquis de l'enfant (WISC-IV, tests de calculs, tests des deux (quatre) op&eacute;rations, dict&eacute;e, lecture, ...)</li>
        </ul>
        <br />
    </div>
 
</div>
<div id="carre_bas"></div>
</body>
</html>

CSS

Code CSS :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 html, body {
background-color:white;
font-family:verdana;
font-size:90%;
}
 
p, ul, li, td {
color:black;
font-family:verdana;
font-size:100%;
list-style-image:url(image/carre-puce.png);
margin-left:-5px;
margin-top:10px;
}
 
h3 {
font-style:italic;
font-weight:normal;
}
 
h2 {
color:#800080;
font-size:200%;
font-style:normal;
font-weight:normal;
text-align:center;
}
 
a:link {
color:#9900CC;
text-decoration:none;
}
 
a:visited {
color:#9900CC;
text-decoration:none;
}
 
a:hover {
color:#9900CC;
text-decoration:none;
}
 
#carre_haut {
background:white url(image/carre.png) repeat scroll 0%;
height:50px;
margin-left:auto;
margin-right:auto;
margin-top:-30px;
width:50px;
}
 
#racine {
background:white none repeat scroll 0%;
border:10px solid #9900CC;
height:450px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
width:787px;
}
 
#carre_bas {
background:white url(image/carre.png) repeat scroll 0%;
height:50px;
margin-left:auto;
margin-right:auto;
margin-top:-30px;
width:50px;
}
 
#menu {
background-color:#CCCCE6;
clear:both;
height:200px;
margin-left:20px;
margin-top:10px;
padding-top:10px;
width:150px;
}
 
#contenu {
height:340px;
margin-left:200px;
margin-top:-200px;
overflow:auto;
padding-right:25px;
text-align:justify;
}
 
#titre {
color:#800080;
font-size:200%;
height:30px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
text-align:center;
}

Onet

Ps: Pas encore eu le temps de mettre a jour l'entete. Je suis aux sun tech actuellement. Je mettrais a jour ce soir
P.S: vous excuserez ce css, je suis plutot axé php/ajax :p

**poupsylo** · 20/03/2007, 12h06

Envoyé par blueice

Ensuite essaye de remettre à plat ton menu, je vois que tu utilises un margin négatifs... toujours faire au plus simple...

Bien d'accord avec ça, les marges négatives ca va te poser pas mal de problèmes entre les différents navigateurs ...

Personnellement je mettrai les marges de #menu li et de #menu ul à zéro, et j'essayerai de jouer sur le remplissage de #menu, je crois que ça te simplifierai la tâche

**trotters213** · 20/03/2007, 13h40

Essaie de remplacer le début de ton code CSS par ceci :

Code CSS :

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
* {
margin:0;
padding:0;
}
html, body {
background-color:#fff;
font-family:verdana;
font-size:90%;
}
 
p, ul, li, td {
color:#000;
font-family:verdana;
font-size:100%;
list-style-image:url(image/carre-puce.png);
margin-top:10px;
}

Maintenant tu devrais avoir le même écart entre tes puces sous IE et sous FF.

PS : un trucs pour raccourcir énormément tes CSS et les rendre plus lisible.
Tu peux contracter ceci :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#ton_div {
margin-bottom:0px;
margin-left:5px;
margin-right:10px;
margin-top:15px;
}

en ceci :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#ton_div {
margin:15px 10px 0px 5px;
}

Il en est de même pour font ou padding. Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#ton_div {
font:Vedana italic bold 12px arial;
}

**onet** · 20/03/2007, 21h50

Tip top trotters213 !!!!!

Merci bien. 1-2 adaptation, et ca roule parfaitement

Onet

P.S: je prends note des infos, et je regarderais pour le prochains... Enfin, si je fais encore du php normal, avec ce que j'ai vu aujourd'hui aux tech days de Paris, je n'en suis pas sur...

[XHTML] XHTML -> IE qui fait des siennes!

HTML

Discussions similaires

Partager

Partager