[HTML] Problème entre IE et FireFox

**Franck.H** · 07/08/2008, 18h19

Bonjour,

Je suis dans l'élaboration du site de mon nouveau programme (dont je viens de sortir une beta1). Maintenant que j'ai fait le design général, je fait le site, quelque chose de simple et efficace (ce que je veut) soit en image:

http://franck.hecht.free.fr/images/cfg/cfg-site-001.jpg

J'ai fait l'index du site (pas encore complètement fini):

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
   <head>
      <link href="style.css" rel="stylesheet" type="text/css">
 
      <title>C File Gen</title>
 
      <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
      <meta name="author" content="HECHT Franck">
      <meta name="copyright" content="Hecht Franck (C) 2008 - Tous Droits Réservés">
      <meta name="content-language" content="fr">
      <meta name="description" content="Site officiel de C File Gen, générateur de templates pour le langage C">
      <meta name="keywords" content="c, file, gen, generator, générateur, fichier, langage, template, gabarit">
   </head>
 
   <body>
      <table align="center" width="800px" cellpadding="0" cellspacing="0">
      <tr>
         <td colspan="7" rowspan="1"><img style="width: 800px; height: 169px;" alt="header" src="images/header.png" /></td>
      </tr>
      <tr background="images/menu-bkgd.png" width="800px">
	     <td background="images/left.png" style="width: 25px;">
         <td><a href="index.php?corps=accueil"><img style="width: 114px; height: 32px; border: 0;" alt="accueil" src="images/btn-accueil.png" /></a></td>
         <td><a href="index.php?corps=news"><img style="width: 98px; height: 32px; border: 0;" alt="news" src="images/btn-news.png" /></a></td>
         <td><a href="index.php?corps=forum"><img style="width: 107px; height: 32px; border: 0;" alt="forum" src="images/btn-forum.png" /></a></td>
         <td><a href="index.php?corps=telechargement"><img style="width: 193px; height: 32px; border: 0;" alt="telechargement" src="images/btn-telechargement.png" /></a></td>
         <td><a href="index.php?corps=documentation"><img style="width: 186px; height: 32px; border: 0;" alt="documentation" src="images/btn-documentation.png" /></a></td>
		 <td background="images/right.png" style="width: 25px;">
      </tr>
      </table>	
 
      <table align="center" width="800px" height="100%" cellpadding="0" cellspacing="0">
         <tr>
            <td background="images/left.png" width="25px">
            <td class="page_content">
 
               <!-- CONTENT -->
 
            </td>
            <td background="images/right.png" width="25px">
         </tr>
      </table>
 
<!--      <table align="center" width="800px" cellpadding="0" cellspacing="0">
         <tr>
            <td></td>
         </tr>
      </table>-->
   </body>
</html>

Voici le lien de test du site: http://franckh.developpez.com/cfg/

Vous pourrez remarquer en testant sur 2 web browser que l'affichage n'est pas le même, sous FireFox c'est ok mais pas IE par exemple ! Bien sûr, je ne suis pas du tout un pro du développement web et là encore je fait dans l'ultra simple... j'espère qu'il y a assez d'info

pour votre coup d'main

**Bisûnûrs** · 07/08/2008, 20h47

Je pense que mettre un DOCTYPE complet, c'est-à-dire avec l'URL de la DTD, résoudra en grande partie ton problème :
http://xhtml.developpez.com/faq/?pag...#html_doctypes

**Franck.H** · 07/08/2008, 21h27

Merci mais en attendant, j'ai changé de style, je me concentre sur les bloc DIV par le biais de quelques tutoriels, le resultat se trouve à la même url, voici les fichiers:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<link href="style.css" rel="stylesheet" type="text/css">
 
		<!--[if IE]>
		 <style type="text/css">
		 html pre
		{
			width: 636px ;
		}
		</style>
		<![endif]-->
 
		<title>C File Gen - Générateur de templates pour le langage C</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />
	</head>
 
	<body>
	<div id="conteneur">		
		<h1 id="header"></h1>
 
		<ul id="menu">
			<li><a href="accueil.html">Acueil</a></li>
			<li><a href="news.html">News</a></li>
			<li><a href="forum.html">Forum</a></li>
			<li><a href="telechargement.html">Téléchargement</a></li>
			<li><a href="documentation.html">Documentation</a></li>
		</ul>
 
		<div id="contenu">
			<h2>Un titre</h2>
			<p>Un paragraphe Réalisation des codes xhtml & css, du tutoriel et du design par ElMoustiko Réalisation des codes xhtml & css, du tutoriel et du design par ElMoustiko Réalisation des codes xhtml & css, du tutoriel et du design par ElMoustiko Réalisation des codes xhtml & css, du tutoriel et du design par ElMoustiko</p>
		</div>
 
		<p id="footer">Réalisation des codes xhtml & css, du tutoriel et du design par ElMoustiko</p>
	</div>
	</body>
</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
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
118
119
120
121
122
body
{
	margin: 0 ;
	padding: 0 ;
	height: 100% ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
}
 
div#conteneur
{
	width: 800px ;
	margin: 0 auto ;
	text-align: left ;
}
 
h1#header
{
	height: 169px ;
	background: url(images/header.png) no-repeat left top;
}
 
div#contenu h2
{
	margin-left : 75px ;
	width: 650px ;
	padding-left: 10px ;
	line-height: 24px ;
	font-size: 1.4em ;
	background: url(images/frame-title.png) no-repeat left bottom ;
	color: #FFFFFF ;
	border-bottom: 1px solid #284386 ;
}
 
div#contenu h3
{
	margin-left: 100px ;
	padding-left: 10px ;
	border-bottom: 1px solid #284386 ;
	border-left: 3px solid #284386 ;
	color: #284386 ;
}
 
div#contenu p
{
	margin-left: 100px ;
	width: 600px ;
	text-align: justify ;
	text-indent: 2em ;
	line-height: 1.7em ;
}
 
div#contenu a
{
	color: #8a0 ;
}
 
div#contenu a:hover
{
	color: #9b2;
}
 
p#footer
{
	margin: 0 ;
	padding-right: 10px ;
	line-height: 30px ;
	text-align: center ;
	color: #506aa8 ;
}
 
pre
{
	overflow: auto ;
	background: #dea ;
	border: 2px solid #9b2 ;
	padding: 5px 0 0 5px ;
	font-size: 1.2em ;
}
 
pre span
{
	color: #560 ;
}
 
pre span.comment
{
	color: #b30000 ;
}
 
pre
{
	overflow: auto ;
}
 
ul#menu
{
	width: 750px ;
	height: 32px ;
	margin-left: 25px ;
	margin-bottom: 50px ;
	padding: 0 ;
	background: url(images/menu-bkgd.png) repeat-x 0 ;
	list-style-type: none ;
}
 
ul#menu li
{
	float: left ;
	text-align: center ;
}
 
ul#menu li a
{
	width: 130px ;
	line-height: 32px ;
	font-size: 1.2em ;
	font-weight: bold ;
	color: #fff ;
	display: block ;
	text-decoration: none ;
}

Le problème maintenant, c'est que je n'arrive pas à aligner les liens du menu, je veut dire, même écartement entre chaque lien. Et d'ailleurs, maintenant sous IE c'est ok pour certaines choses mais plus pour Firefox, par exemple, l'espace en haut, juste au dessus du header, il y a un espace sous FF mais pas IE, sous IE c'est donc bon !

**Bisûnûrs** · 07/08/2008, 21h41

Pour l'espace en haut sur Firefox, il est dû aux marges du h1, donc tu peux lui mettre margin-top:0 pour corriger le tir.

En ce qui concerne ton menu, tu as mis des dimensions de 130px à tes liens, tu en as 5 => 650px, alors que ton ul fait 750px. Tu as donc 100px de déchet. Et puis il serait plus judicieux de mettre tes largeurs aux li plutôt qu'aux liens.

**Franck.H** · 07/08/2008, 21h50

Ok pour les liens c'est ok maintenant...

Envoyé par Bisûnûrs

Pour l'espace en haut sur Firefox, il est dû aux marges du h1, donc tu peux lui mettre margin-top:0 pour corriger le tir.

mais là ca marche toujours pas, j'ai fait ceci:

Code :

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

1
2
3
4
5
6
h1#header
{
	height: 169px ;
	background: url(images/header.png) no-repeat left top;
	margin-top: Opx ;
}

C'est bien ce qu'il fallait faire ? Rien n'a changé pour autant.

**Bisûnûrs** · 07/08/2008, 21h52

Fais gaffe, tu as mis un "o" majuscule à la place d'un 0 !

**Franck.H** · 07/08/2008, 21h54

Envoyé par Bisûnûrs

Fais gaffe, tu as mis un "o" majuscule à la place d'un 0 !

Zut c'est vrai, même pas remarqué

Juste pour terminer, j'aimerais que ma page prenne 100% de la hauteur, comment je dois faire cela ?

J'ai bien essayé ceci

Code :

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

1
2
3
4
5
6
7
8
div#conteneur
{
	width: 800px ;
	height: 100% ;
	margin: 0 auto ;
	text-align: left ;
	background: url(images/background.png) repeat-y ;
}

mais sans succes

**Bisûnûrs** · 07/08/2008, 22h03

Pour mettre une hauteur en % à un élément, il faut que son parent ait une hauteur définie. Ici tu dois rajouter height:100% à body et à html :

Code css :

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

1
2
3
html, body {
   height:100%;
}

Seulement si ton texte dépasse la hauteur d'un écran, tes bordures ne suivront pas. Dans ce cas-là mets min-height à la place du height sur le conteneur, et comme IE6 ne connait pas cette instruction mais gère le height comme un min-height, mets height:100% sur la feuille de style spécifique à IE6 au conteneur.

**Franck.H** · 07/08/2008, 22h07

Ok c'est au poil, merci pour tout

[HTML] Problème entre IE et FireFox

HTML

Discussions similaires

Partager

Partager