CSS FF et IE rendu différent

**warwill** · 05/02/2008, 18h17

après des début difficiles je commence à me débrouiller (enfin je croyais!)
je vérifie mon travail sur FF, et je viens de constater ce matin ce qui ce
passe sur IE(7). Un désastre! Un chamboule-tout!

j'ai regardé la faq du site, j'ai fait une petite recherche google, mais
j'ai pas trouvé ce qu'il me fallait. Donc mon css fait bien son taf sur FF
mais pas sur IE:
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
a:link{
color:blue;
text-decoration:none;
}
a:visited{
color:blue;
text-decoration:none;
}
a:hover{
color:blue;
text-decoration:none;
}
body{
 height:100%;
 width:100%;
 margin:0;
 padding:0;
}
.tablespace{
 text-align:left;
 background-color:rgb(90, 145, 177);
 width:100%;
 border:2;
}
#divspaceg{
 float:left;
 margin-top:3%;
 width:15%;
}
#divspaced{
 position:absolute;
 margin-top:3%;
 margin-left:85%;
 width:15%;
}
#divcont{
 width:70%;
 margin:3% 0% 15% 15%;
}
#divcopy{
 width:100%;
 text-align:center;
 margin-top:20px;
 height:15px;
 clear:both;
}
#divlogo{
 width:121px;
 height:121px;
 margin-top:10px;
 margin-left:auto;
 margin-right:auto;
}

ça donne cela sur FF:

et ça sur IE :

si qlq un à de quoi m'aidé je suis preneur.

**Erwan31** · 05/02/2008, 19h11

Bonjour,
pour que l'on puisse t'aider, tu dois founir la totalité du code XHTML et CSS. ;-)

**warwill** · 05/02/2008, 19h27

le css est plus haut
voici le 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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html lang="fr">
<head>
<script language="JavaScript1.2"> function ejs_nodroit() { return(false); } document.oncontextmenu = ejs_nodroit; </script>  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <meta name="keywords" content="">
<title>Connection</title>
<meta name="autor" content="Warwill Corp EURL">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style="background-image: url(fond%20espace.gif);">
<div id="divspaceg">
<table class="tablespace" border="1" cellpadding="2" cellspacing="2">
<tr><td><a href="profil.php">MON PROFIL</a></td></tr>
<tr><td><a href="voirprof.php?pseudo=">Aper&ccedil;u</a></td></tr>
<tr><td><a href="modif_etat_civil.php">Donn&eacute;es perso</a></td></tr>
<tr><td><a href="modif_mode.php">Loisir</a></td></tr>
<tr><td><a href="modif_descri.php">Description</a></td></tr>
<tr><td><a href="Inscri_photo.php">Photos</a></td></tr>
<tr><td><a href="messagerie.php">MESSAGERIE</a></td></tr>
<tr><td><a href="msg_recu.php">Message re&ccedil;u</a></td></tr>
<tr><td><a href="msg_env.php">Message envoy&eacute;</a></td></tr>
<tr><td>Mes listes</td></tr>
<tr><td><a href="mon_abo.php">Abonnement</a></td></tr>
<tr><td><a href="logout.php">D&eacute;connection</a></td></tr>
</table></div>
<div id="divspaced">
<table class="tablespace" border="1" cellpadding="2" cellspacing="2">
<tr><td><a href="profil.php">MON PROFIL</a></td></tr>
<tr><td><a href="voirprof.php?pseudo=">Aper&ccedil;u</a></td></tr>
<tr><td><a href="modif_etat_civil.php">Donn&eacute;es perso</a></td></tr>
<tr><td><a href="modif_mode.php">Loisir</a></td></tr>
<tr><td><a href="modif_descri.php">Description</a></td></tr>
<tr><td><a href="Inscri_photo.php">Photos</a></td></tr>
<tr><td><a href="messagerie.php">MESSAGERIE</a></td></tr>
<tr><td><a href="msg_recu.php">Message re&ccedil;u</a></td></tr>
<tr><td><a href="msg_env.php">Message envoy&eacute;</a></td></tr>
<tr><td>Mes listes</td></tr>
<tr><td><a href="mon_abo.php">Abonnement</a></td></tr>
<tr><td><a href="logout.php">D&eacute;connection</a></td></tr>
</table></div>
<div id="divlogo" align="center"><IMG height="120px" width="120px" src="/logo/logo2.jpg" ></div>
<div id="divcont">
<form action="log.php" method="post">
<table align="center" style="margin-top:3%;text-align:center; background-color:rgb(39, 156, 195);width:10%;height:17%;" border="1" cellpadding="2" cellspacing="2">
<tr><td>Pseudo:<input name="login" type="text"></td></tr>
<tr><td>Mot de passe:<input name="mdp" type="password"></td></tr>
<tr><td><input value="Identifiez vous" type="submit"></td></tr>
</table>
</form>
<div style="text-align:center;margin-top:4%;width:100%;">
<a href="Inscri_etat_civil.php">Inscrivez-vous!</a><br>
C'est gratuit et &ccedil;a prend 5 minutes!</div>
</div>
</body>
</html>

**Erwan31** · 05/02/2008, 20h03

Erreur classique: ton doctype HTML4.0 est incomplet, ce qui fait basculer les navigateurs récents en mode Quirks (mode de compatibilité descendante non standard) qui favorise les différence d'affichage entre navigateurs.

Le remplacer par:

Code :

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

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

et regardes si cela règle ton problème.

**warwill** · 06/02/2008, 10h04

c'est déjà un bon début, ça arrange pas mal la sauce.
reste encore qlq détaille, sur IE l'affichage est nettement plus large(width)
que sur FF, ducoup sur mes menus de chaque coté y en a un qui ne se voit
plus et la symétrie...

pour l'instant je régle mon body comme suit:

Code :

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

1
2
3
4
5
6
body{
 height:100%;
 width:100%;
 margin:0;
 padding:0;
}

**Erwan31** · 06/02/2008, 12h18

Envoyé par Candygirl

Je suppose que tu voulais plutôt proposer:

Code html :

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

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

Parce que lui proposer de passer en xhtml demanderait un peu plus d'explications, il me semble

Oui, merci de le faire remarquer, erreur de manip. Passer au XHTML n'apporte rien.

@Warwill;
Si tu veux conserver le XHTML, ce que je peux comprendre, il te faudra être plus rigoureux et commencer par convertir la syntaxe avec un outil adéquate
comme HTML tidy.

la différence entre XHTML et HTML vient principalement de la syntaxe:
syntaxe XMLisée et plus rigoureuse et par conséquent moins permissive en XHTML (balise en minuscule...)
Un site en XHTML 'apportera aucune valeur ajoutée immédiate mais sera plus évolutif quant à la syntaxe employée.

**Candygirl** · 06/02/2008, 10h28

Envoyé par Erwan31

Erreur classique: ton doctype HTML4.0 est incomplet

[...]

Le remplacer par:

Code :

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

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

Je suppose que tu voulais plutôt proposer:

Code html :

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

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

Parce que lui proposer de passer en xhtml demanderait un peu plus d'explications, il me semble

**warwill** · 06/02/2008, 10h37

j'ai essayé les deux, la différence est pas vraiment flagrante
de mon point de vue, mais je me doute que tu n'a pas dit ça pour
rien Candy. j'avoue que j'ai pas encore bien saisie la différence
entre html et xhtml.

CSS FF et IE rendu différent

CSS

Vue hybride

Discussions similaires

Partager

Partager