CSS FF et IE rendu différent

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

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, 20h11

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

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

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, 21h03

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, 11h04

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;
}

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

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, 11h37

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.

**Pierre1111** · 06/02/2008, 12h14

Ca ne répondra pas à votre question, mais pourquoi ces deux colonnes de liens qui me semblent identiques ? Si ce sont réellement les mêmes, la lourdeur et la redondance me paraissent plus gênantes que l'absence de symétrie qui donnerait au contraire plus de dynamisme à l'ensemble.

Il ne s'agit bien sûr que de mon humble avis strictement graphique.

**warwill** · 06/02/2008, 12h53

en effet ça ne répond pas à mon soucis mais c'est jamais un tort de remettre
en question le graphisme, surtout que c'est pas mon point fort. je vais surment
scinder le menu en 2 et en mettre une partie de chaque coté.
ma psychologie a tendance à me faire préférer ce qui est symétrique mais
cela n'engage que moi.
j'ai fait un poste sur le sujet dans le forum vos avis.

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

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.

**warwill** · 06/02/2008, 14h07

ok pour la différence html xhtml.
et pour mon soucis?

**Erwan31** · 06/02/2008, 14h36

Le code que tu donnes ne correspond pas exactement aux écrans que tu montres.

**warwill** · 06/02/2008, 16h50

en effet il manque le menu horizontal du haut
mais comme il est pas régis par le css je vois pas en quoi
il nous concerne ici.(surtout qu'il ne pose pass de soucis lui)

**Erwan31** · 06/02/2008, 17h24

Avant de te répondre je confirme la critique tenue plus haut sur le fait que le double menu ne sert à rien.
D'autre part les double entrée sont ergonomiquement déconseillées excepté
pour la reprise du menu principale en footer ou sous forme de plan de site en footer.

**warwill** · 06/02/2008, 19h57

ok néanmois la question de départ n'est pas résolu et changer tout mon
design n'y répondra pas plus.

comme je le disai il y a une discussion dans le forum approprié pour
en parler.
sinon mes recherche avance:
IE n'assigne pas les mêmes valeur au % de largeur de page que FF
pourtant un objet comme le tableau(menu) du haut de page
utilise un align center et ce trouve en même position sur les 2 pages...

**warwill** · 07/02/2008, 11h54

j'ai décidé des faire un comentaire conditionnel et de mettre
2 feuille de style différente (1 pour IE et 1 pour les autres).

cependant j'ai toujours des soucis avec IE.
par exemple si je veux faire passer mes border en css, il disparaissent tous!!

CSS FF et IE rendu différent

CSS

Discussions similaires

Partager

Partager