Trouver le probleme mais pas la soluce

**orphen** · 24/02/2007, 00h40

Coucou,
j'ai trouver le probleme de mon site qui passait mal sous ie il me semble que c'est un probleme avec mes {posittion}
pour mon test j'ai mis un div avec 100% de largeur sur fond rouge dans ma page.

quand je regarde sous les deux navigateur les deux div ne sont pas placer pareil.

j'ai du mal a comprendre, je me tourne donc vers vous pour avoir des idée de corection.

j'en ai profiter pour modifier mon code html pour le rendre moin piquant au yeux.

http://fansyl.com.free.fr

Code html :

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
 
<!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" >
   <head>
       <title>www.fansyl.com</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <meta name="keywords"           content="fansyl,infographie,3d,maquetisme,cinéma,compositing,maya" />
	   <meta name="author"             content="deliee fanny,bousselier sylvain" />
	   <meta name="description"        content="Découvrez sur ce site nos portofolios, tutoriaux et projets" />
	   <link href="css/design1.css" rel="stylesheet" type="text/css" media="screen" />
   </head>
   <body>
      <div id="fondblanc"><div id="banniere"><img src="images/iconefansyl.gif" alt="Chargement" class="iconefansyl" />
	                                         <img src="images/banniere.gif" alt="Chargement" class="banniere" />
											 <img src="images/iconebanniere.gif" alt="Chargement" class="iconebanniere" />
				          </div>
 
                         <div id="menu"><p class="navig">galeries <span class="separation">|</span> cv <span class="separation">|</span> biographies <span class="separation">|</span> projets <span class="separation">|</span> forum <span class="separation">|</span> liens</p>
                         </div>		
                         <div id="orangecote"></div>
						 <div id="corps"><img src="images/print/printmont.gif" alt="Chargement" class="print" />
						                 <img src="images/bienvenu.gif" alt="Chargement" class="bienvenu" />	 
						                 <p class="para1">
										                  Bienvenue sur <span style="color:#cb6709;">www.fan</span><span style="color:#66330b;">syl.com</span>
                                                          Ce site a été entierement codé à la main, il contient le travail
	                                                      personnel et professionnel de <span style="color:#66330b;">Sylvain Bousselier</span> et <span style="color:#cb6709;">Fanny Deliée.</span>
	                                                      Nous travaillons dans l'imagerie de synthese, le maquettisme, le compositing,
	                                                      le webdesign, l'integration (xhtml,multimedia).
	                                                      Chaque partie du site est decoupée en deux sections: celle de <span style="color:#66330b;">Sylvain</span> et de <span style="color:#cb6709;">Fanny.</span><br />
                                                                                                                      														                                        <br />
                                          <img src="images/separation2.gif" alt="Chargement" class="separtext" /><br />  
                                                                                                                 <br />										  
                                                          Ce site se compose d'un menu qui vous permettra de naviguer dans les differentes sections.
	                                                      La partie <span style="color:#cb6709;">galerie</span> vous montrera differents travaux personnels ou professionnels, la partie
	                                                      <span style="color:#cb6709;">CV</span> contient nos Curiculum Vitae avec nos experiences, la partie <span style="color:#cb6709;">biographie</span> contient nos parcours
                                                          respectifs, la partie <span style="color:#cb6709;">projet</span> contient notre projet personnel commun, la partie <span style="color:#cb6709;">forum</span> contient le forum de
                                                          notre site, et la partie <span style="color:#cb6709;">liens</span> contient differents liens sur le graphisme qui nous tiennent à coeur. <br />  
                                                                                                                                                                                                   <br />        		
                                           <img src="images/separation2.gif" alt="Chargement" class="separtext" /><br />  
                                                                                                                  <br />										   
                                            <span style="color:#cb6709;">Fanny</span> et <span style="color:#66330b;">Sylvain</span> vous souhaitent une bonne visite. N'hesitez pas à nous contacter pour
                                                         vos projets ou plus de renseignements sur notre travail en nous envoyant un message
                                                         grace à la partie ci-dessous.									  
						 </div>
 
						 <div id="news"><!--espace mise en page--><br /><h4 class="titrenews">Ev&egrave;nements et news</h4>
						                                      <h5>News du site :</h5>
						                                      <p class="news">Mise en ligne du site le../../....
	                                                            Certaines pages ne sont pas encore en ligne
                         				                      </p> 
															  <img src="images/separation.gif" alt="Chargement" class="separation1" /><br />
															  <h5>News de Sylvain :</h5> 
															  <p class="news">Fin du codage de notre site.<br />
	                                                                          Premieres images de ma galerie.<br />
																			  Ma biographie et mon CV en ligne.<br />
                         				                      </p>
                                                              <img src="images/separation.gif" alt="Chargement" class="separation2" /><br />	
                                                              <h5>News de Fanny :</h5>
                                                              <p class="news">Fin du codage de notre site.<br />
	                                                                          Premieres images de ma galerie.<br />
																			  Ma biographie et mon CV en ligne.<br />
                                                              </p>	
                                                              <div id="formulairesylvain">b
                                                              </div>															  
						 </div>                      						 
      </div>
   </body>
</html>

code css

Code css :

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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
 
body{
background-image: url(../images/imagefond.gif);
margin-top: 0px;
}
 
#fondblanc{
position: relative;
background-color: #ffffff;
width: 800px;
height: 1450px;
margin: auto;
}
 
#banniere{
margin: auto;
background-color: #ffffff;
width: 780px;
height: 100px;
}
 
.iconefansyl{
position: absolute;
margin-top: 0px;
margin-left: 0px;
width: 140px;
height: 100px;
}
 
.banniere{
position: absolute;
margin-left: 150px;
margin-top: 0px;
height: 100px;
width: 440px;
}
 
.iconebanniere{
position: absolute;
margin-left: 600px;
margin-top: 0px;
height: 100px;
width:130px;
}
 
#menu{
margin: auto;
background-color: #66330b;
width: 780px;
height: 20px;
}
 
.navig{
display: inline;
margin-left: 100px;
word-spacing: 35px;
color: #ffffff;
font-size: 13px; 
font-variant: small-caps;
}
 
.separation{
color: #cb6709;
}
 
#news{
margin-top: 0px;
margin-left: 10px;
background-image: url(../images/news.gif);
background-repeat: repeat-y;
width: 176px;
height: 1322px;
}
 
.titrenews{
margin-top: 0px;
font-size: 12px;
font-variant: small-caps;
font-weight: normal;
color: #ffffff;
text-align: center;
margin-left: 18px;
border-top: solid #e5b382 2px;
border-bottom: solid #e5b382 2px;
}
 
h5{
color: #ffffff;
padding-left: 25px;
display: inline;
text-decoration: underline;
}
 
.news{
margin-top: 0px;
padding-top: 10px;
padding-left: 25px;
padding-right:20px;
text-align: left;
font-size: 11px;
font-variant: small-caps;
color: #ffffff
}
 
.separation1{
position: absolute;
margin-left: 25px;
margin-top: 5px;
width: 136px;
height: 10px;
}
 
.separation2{
position: absolute;
margin-left: 25px;
margin-top: 5px;
width: 136px;
height: 10px;
}
 
#corps{
 
position: absolute;
left: 186px;
margin-top: 0px;
width: 550px;
height: 1320px;
border-bottom: dotted 2px #cb6709;
}
 
.print{
width: 550px;
height: 200px;
}
 
.para1{
margin-top: 0px;
clear: both;
color: #787878;
font-size: 12px;
padding-left: 90px;
padding-right: 20px;
width: 400px;
}
.bienvenu{
margin-top: 0px;
float: left;
width: 125px;
height: 89px;
}
 
.separtext{
margin-left: 100px;
width: 141px;
height: 9px;
}
 
#formulairesylvain{
position:absolute;
background-color: red;
width: 100%;
}
 
#orangecote{
position: absolute;
left: 736px;
background-color: #cb6709;
width: 54px;
height: 1322px;
margin-top: 0px;
}

**Candygirl** · 24/02/2007, 01h19

Envoyé par orphen

j'en ai profiter pour modifier mon code html pour le rendre moin piquant au yeux.

Si tu pouvais en faire de même pour l'orthographe de tes messages, ça serait encore mieux

Autrement, à première vue, je dirais que la différence provient du margin-bottom du p pris en compte sous IE pour placer l'élément en absolu et pas pris en compte sous FF.

**orphen** · 24/02/2007, 01h42

il n'y a pas de margin-bottom dans mon code.

Desoler pour mon orthographe.

**Candygirl** · 24/02/2007, 01h55

Les navigateurs ont des réglages css par défaut (ce sont eux qui étaient aussi à l'origine de l'apparition de la barre de navigation horizontale lorsque tu spécifiais un body de 100% de large ce qui, avec les marges par défaut, provoquait un dépassement de la largeur de la fenêtre).

A moins que tu n'aies spécifié, dans ton css, un margin-bottom de 0 pour tes paragraphes, ce margin-bottom "existe" fort probablement.

**orphen** · 24/02/2007, 02h24

ok je comprend mieu maintenan je test ça demain merci de ta patience en tous cas.

c'est dommage que tous les navigateurs ne partent pas du meme pied.

Si je comprend bien ce que tu m'a dit Internet explorer met automatiquement une marge sur tous les cotés si on ne lui dit pas le contraire.

Le but des navigateurs c'est d'etre performant non?

Etre obligé de rajouter des margin:0 ça fait un code plus lourd a charger (meme si ce n'est pas énorme)

**MasterOfChakhaL** · 24/02/2007, 03h12

Tous les navigateurs ont des valeurs par défaut pour ce genre de propriété.

C'est ce qui permet d'avoir un formatage minimal de ton html lorsque tu n'as pas de feuille de style.
Les listes sont indentés, les titres sont écris plus gros et en gras, certains éléments s'affichent en ligne d'autres en bloc...

Le hic c'est que les navigateurs n'ont pas tous les mêmes valeurs par défaut. D'où la necessité de les redéfinir.

tu peux très bien remettre tout à 0 en utilisant le sélecteur universel *:

Code :

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

1
2
3
4
* {
  margin: 0;
  padding: 0;
}

tu devras ensuite redéfinir ces propriétés là où tu en as besoin.

**Candygirl** · 24/02/2007, 10h29

Envoyé par orphen

Si je comprend bien ce que tu m'a dit Internet explorer met automatiquement une marge sur tous les cotés si on ne lui dit pas le contraire.

Tu as la réponse par les explications de MasterOfChakhals (perso je commence quasi toujours ma feuille de style par le * {margin:0;padding:0;})

Dans ton cas le margin-bottom par défaut est aussi bel et bien présent sur FF mais il ne le considère pas pour positionner ton élément en absolu. Il faut dire que, très souvent, lorsque tu positionnes un élément en absolu, tu spécifies le top, right, bottom et/ou left et donc tu n'as pas ce problème-là.

**orphen** · 24/02/2007, 12h19

ce matin sur internet avant de venir sur le forum j'ai trouver le sélecteur universel sur un site.

je me pose juste la question si je met ça et que plus tard j'ai besoin d'une marge ou d'un padding est ce que ie les prendra en compte ou restera t'il fixer sur
* {
margin: 0;
padding: 0;
}

?

Trouver le probleme mais pas la soluce

CSS

Discussions similaires

Partager

Partager