Code body et balises compatibles sur tous les navigateurs ?

sun69 · 01/03/2011, 12h38

Bonjour,
Je suis en train de créer un site en html et css mais lors des testes sur différents navigateurs la présentation n'est pas la même. les div sont décallées. Comment rendre compatible mon code afin qu'il fonctionne sur les différents navigateurs ?
Voici le code html :

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
 
<link href="text.css" rel="stylesheet" type="text/css" />
 
<!--[if IE 8]-->
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<!--[endif]--> 
 
</head>
 
<body onload="alterne();">
 
<div id="header">
</div>
 
<div id="site">
 
<div id="colgauche">
 
<div id="logo_lettre">
</div>
 
</div>
 
 
<div id="menu">
<ul>
<li><a href="">Accueil</a></li>
 
<li><a href="#">Technologies</a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="prothese_implantaire.htm">Implantologie</a>
<ul>
<li><a href="prothese_implantaire.htm">Prothèse Implantaire</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul>
</li>
<li><a href="#">Galerie Photos</a>
<ul>
<li><a href="#">Sous-item 1</a></li>
<li><a href="#">Sous-item 2</a></li>
<li><a href="#">Sous-item 3</a></li>
</ul></li>
<li><a href="">Esthétiques</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Partenaires</a></li>
</ul>
</div>
 
<div id="texte_index">
 
<div id="image">
<img src="laboratoire/image_laboratoire.png" width="150" height="122" >
 
</div>
<b class="Style1">Bienvenue sur le site du laboratoire Belain de prothèses dentaires
</b><br><br>
 
<b class="Style2">Avec 28 ans d'expérience, nous disposons d'une équipe de prothésistes dentaires spécialistes pour l'étude, la fabrication, la modification de prothèses dentaires. Véritable artisan, nous fabriquons, réparons ou modifions des prothèses dentaires dans notre laboratoire dentaire près de Paris à Vincennes. Afin de permettre à vos patients de retrouver la joie de sourire.</b><br><br>
 
<b class="Style2">C'est à partir des empreintes de la cavité buccale du patient, effectuées par le chirurgien-dentiste, que le prothésiste débute son travail. Il choisit le matériau qui s'avère le plus adapté : céramique, résine, métaux (or, platine, etc.), pâtes thermoplastiques, en tenant compte de la demande du patient (une prothèse en céramique est plus coûteuse qu'une prothèse métallique) et de l'emplacement de la prothèse dans la bouche. Puis il sculpte, moule ou modèle. Une fois la prothèse achevée et essayée sur le patient, il peut intervenir à nouveau, à la demande du praticien, pour d'éventuelles finitions et ajustements.</b><br>
 
<b class="Style2">Les prothésistes dentaires exercent souvent dans des laboratoires, des cabinets dentaires ou dans des centres de santé, des mutuelles et des hôpitaux. Quelques-uns exercent en libéral.</b><br><br>
 
<b class="Style2">Le travail du prothésiste exige évidemment une minutie et une habileté manuelle extrême. C'est un métier de très haute précision. Les prothèses, dont le coût peut être très élevé, doivent répondre à des impératifs fonctionnels, biologiques et esthétiques. Le prothésiste doit donc posséder une connaissance parfaite de la morphologie dentaire, un sens de l'harmonie et de l'esthétique faciale.</b><br>
 
</div>
 
</div>
 
</body>
</html>

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
body {
margin: 0;
/*text-align: center;*/
padding:0;
margin:0;
width: 100%;
height: 100%;
background-image: url(images/images/body.jpg);
background-repeat: repeat-y;
}
#header {
position: absolute;
width: 171px;
height: 60px;
margin-left: 800px;
margin-top: 40px;
background-image: url(images/images/logo_laboratoire_belain.png);
}
#site {
position: absolute;
width: 1160px;
height: 800px;
margin-left: 0px;
margin-top: 140px;
background-image: url(images/images/site.jpg);
}
#colgauche {
position: absolute;
width: 181px;
height: 800px;
/*float: left;*/
background-image: url(images/images/body.jpg);
background-repeat: no-repeat;
}
#logo_lettre {
position: absolute;
width: 100px;
height: 64px;
margin-left: 40px;
margin-top: 570px;
background-image: url(images/images/logo.png);
}
#menu {
position: absolute;
margin-left: 181px;
width:990px;
height:28px;
z-index: 2;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
font-size: 14px;
}
#menu li {
float:left;
margin:auto;
padding:0px;
background-image: url(images/images/menu.jpg);
/*background-color:white;*/
}
#menu li a {
display:block;
width:130px;
color:black;
text-decoration:none;
padding:5px;
}
#menu ul li ul {
display:none;
}
#menu li ul {
position:absolute;
}
#menu li a:hover {
color:#9350ab;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
 
#texte_index {
position: absolute;
width: 800px;
height: 400px;
margin-left: 181px;
margin-top: 60px;
padding-right: 5px;
padding-left: 5px;
z-index: 1;
border: 2px solid #443962;
}
#image {
float:left;
margin-top: 20px;
margin-right: 10px;
margin-bottom: 8px;
margin-left: 0;
}
.Style1 {
font-size: 16px;
color: #9350ab;
}
.Style2 {
font-size: 13px;
color: #333;
}
.Style3 {
font-size: 14px;
color: #CCC;
text-decoration: none;
}

Merci par avance pour votre aide

NoSmoking · 02/03/2011, 18h52

Bonjour,
- commences par mettre un DOCTYPE Strict, par exemple

Code html :

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

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

- valides ta page en terme de XHTML, Markup Validation Service

- revoies les commentaires conditionnels

Code :

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

1
2
3
4
<!--[if IE]>
  <style type="text/css">
  </style>
<![endif]-->

et non

Code :

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

1
2
3
4
<!--[if IE 8]-->
  <style type="text/CSS">
  </style>
<!--[endif]-->

ornitho13 · 02/03/2011, 22h59

Citation:

Envoyé par NoSmoking

- revoies les commentaires conditionnels

Code :

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

1
2
3
4
<!--[if IE]>
  <style type="text/css">
  </style>
<![endif]-->

et non

Code :

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

1
2
3
4
<!--[if IE 8]-->
  <style type="text/CSS">
  </style>
<!--[endif]-->

<!--[if IE 8]> existe si on veut appliquer une css uniquement pour IE8

par contre la déclaration n'est pas correct (il y a des tirets en trop), voici ce qu'il faut mettre :

Code html :

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

1
2
3
4
5
6
 
<!--[if IE 8]>
  <style type="text/CSS">
      ...
  </style>
<![endif]-->

polymorphisme · 02/03/2011, 23h25

Bonjour,

il est clair que tu dois tout d'abord avec un code propre avant de

Citation:

rendre compatible mon code afin qu'il fonctionne sur les différents navigateurs

Je ne connais pas de méthode toute faite, hormis l'expérience.
S'il en existe une, alors je reste curieux de la connaitre.

NoSmoking · 03/03/2011, 07h26

Citation:

Envoyé par ornitho13

<!--[if IE 8]> existe si on veut appliquer une css uniquement pour IE8

très juste, j'ai oublié de reporter le 8

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email