[HTML] Problème entre IE et FireFox

Version imprimable

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:

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

:merci: pour votre coup d'main :king:

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

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

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:

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:

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 !

:merci:

07/08/2008, 21h41
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.

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.
07/08/2008, 21h50
Franck.H
Ok pour les liens c'est ok maintenant...

Citation:

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:

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.
07/08/2008, 21h52
Bisûnûrs

Fais gaffe, tu as mis un "o" majuscule à la place d'un 0 !
07/08/2008, 21h54
Franck.H
Citation:

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é :traine:

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

J'ai bien essayé ceci
Code:

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 :aie:

:merci:
07/08/2008, 22h03
Bisûnûrs
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:

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.
07/08/2008, 22h07
Franck.H

Ok c'est au poil, merci pour tout ;)