Page compatible IE / Mozilla

**Ghunter59** · 14/02/2009, 15h14

Bonjour,

Je suis en train de réaliser un site que j'aimerais rendre identique sous IE et Firefox. Cela fonctionne presque, cependant sous IE, j'ai quelques décalages :

mes differents elements ne se centrent pas (baniere, menu,...) et surtout, mon corps de page fait 100% de la largeur de la page alors que normalement, il ne devrait faire que 800px, centré.

Voici le code :

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
<html>
<head>
<link rel="icon" type="image/png" href="./Images/icone.ico">
<link rel="stylesheet" type="text/css" href="./Design/style.css">
<title>Jardin botanique Nicolas Boulay | Accueil</title>
</head>
 
<body>
 
<table border=0>
<tr><td>
	<?php
                $racine=".";
        ?>
	<img src="./Images/test_banniere.gif" width=100%>
<hr>
</td></tr><tr class="menu1"><td>
 
	<?php
        include("./essai.php");
        ?>
 
</td></tr><tr class="ici"><td>
	<?php
                include("$racine/Design/ici.php");
        ?>
	</td>
</tr><tr class="corps"><table cellspacing="5" cellpadding="5"  align=center border=1 style="border-spacing : 0;" width=95%><tr class="corps"><td>
		<h2 align=center>Contenu</h2>
		<p>Carte</p>
		<p>Bla bla bla...</p>
 
</td></tr></table></tr><tr class="pied"><td>
	<?php
                include("$racine/Design/pied.php");
        ?>
</td></tr>
 
</table>	
 
</body>
 
</html>

Et le 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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
body{
	width:800px;
	font:11px verdana, arial, helvetica, sans-serif;
	color:#333;
	border-style:solid;
	margin:0 auto;
	border-color:green;
	border-width:1px;
}
table{
	border-spacing:0;
	border-style:inherit;
	border-color:green;
	font:11px verdana, arial, helvetica, sans-serif;
}
 
tr{
	padding:5px;
}
 
.content{
	position:absolute;
	background:#FFFFFF;
	top:200px;
	width:55%;
}
 
.pied a {
	text-decoration: none;
}
 
.pied{
	position:absolute;
	bottom:0px;
	padding:5px;
}
 
.ici{
	background:#FFFFFF;
	background: transparent url('../Images/toto.jpg') no-repeat;
	background-position: top center;
	font:11px verdana, arial, helvetica, sans-serif;
	height:35px;
}
 
.corps{
	background:#FFFFFF;
	border-style:ridge;
	border-color:green;
	border-width:1px;
	height:58%;
}
 
hr{
	margin:0 auto;
	padding:0;
	border-color:green;
	border-width:1px;
 
}

Si vous pouvez trouver mon erreur, je vous en serais tres reconnaissant !
Merci d'avance.

**Erwan31** · 15/02/2009, 12h06

Bonjour,
commence par déclarer un Doctype (HTML 4 Transitionnal de préférence ici) en haut de ton document pour que les navigateurs graphiques ne basculent pas en mode de compatibilité descendante (appelé le plus souvent mode Quirks) qui
est un mode de rendu non standard qui conduit à des différences de rendu d'un navigateur à l'autre puisque chacun utilise alors son propre mode de rendu.
Une fois que tu as fais ça, vérifie si ça règle ton problème.

**RomainVALERI** · 16/02/2009, 21h48

A noter également que la mise en page en tableaux tend à devenir progressivement obsolète, remplacée par l'utilisation d'éléments sémantiquement plus appropriés (car les tableaux sont faits pour stocker des données... tabulaires ^^) avec de grands avantages de portabilité, d'accessibilité, de maintenabilité, et de plein d'autres mots en "-ité" qui déchirent

Non, plus sérieusement, comme la structure de la page est relativement simple, je te conseille d'envisager cette voie (déjà plus que largement empruntée) pour adapter la structure de tes pages, il faudra bien y passer de toutes façons, et il y a bien peu de chances que tu regrettes tes tableaux après quelques temps ^^

Page compatible IE / Mozilla

HTML

Vue hybride

Discussions similaires

Partager

Partager