Compatibilité des navigateurs

**king_soft** · 05/08/2012, 16h36

Bonjour,

J'ai crée une page web avec html5 et css,quand je fais le teste avec google chrome ça marche très bien,mais quand je fais le test avec Firefox ça marche plus et les images(image arrière-plan+logo) que font partie de ma page n’apparaissent plus!!et je veux que ma page soit fonctionnel pour tous les navigateurs

Alors comment je dois faire pour résoudre ce problème?

Et merci d'avance pour vos réponses.

**Muchos** · 05/08/2012, 19h05

Il faut que tu nous donnes les codes css et html qui ont un rendu différent sur les deux navigateurs, plus tout le code qui précède le body.

Précise aussi les versions de Chrome et Firefox que tu as utilisées.

**king_soft** · 05/08/2012, 19h22

Ok donc voila mes codes:

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
  <body>
      <div id=" bloc_page ">
 <header >
 <img src="logo.png" />
 
 <nav >
 <ul >
 <li><a href ="#">home</a></li>
 <li><a href ="#">over mytai</a></li>
<li> <a href ="#">menu</a></li>
 <li><a href ="#">contact</a></li>
 </ul >
 </nav >
 </header >
 
 
 
 <section>
 <article>
 <!-- <div class="imageflottante"><img src="mytai_watermerk.png"/></div>  -->
 
 <h1>Welkom bij MyTai & More</h1 >
 <p>MyTai & more is een Nederlands work restaurant gevestigd op de zwarljanstraat 112 in Rotterdam.Al sinds 2010 hebben wij een succesvol recept ontwekkeld</p>
 <h1><img src="content_img_home.png"</h1>
 <h1>Gezond eten</h1>
 <p>WOK is geintroduceerd in Azle en bevat de dagelijkse hoeveelheid groentie die je nodig hebt.</p>
 <h1>Erg lekker</h1>
 <p>Het is nog steeds de maaltijd wat heel lekker word gevonden door vele en dagelijks geconsumeerd word.<strong>Meer</strong></p>
 </article>
 <aside >
 
 </aside >
 </section>
 
 <footer >
 
 </footer >
 </div >  
    </body>

et pour le 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
  @font - face
{
 font - family : 'BallparkWeiner ';
 src : url(' polices / ballpark .eot ');
 src : url(' polices / ballpark .eot ?# iefix ') format (' embedded -
opentype ') ,
 url (' polices / ballpark .woff ') format ('woff ') ,
 url (' polices / ballpark .ttf ') format (' truetype ') ,
 url (' polices / ballpark .svg# BallparkWeiner ') format ('svg
');
 font - weight : normal ;
 font - style : normal ;
 }
 
 @font - face
 {
 font - family : 'Dayrom ';
 src : url(' polices / dayrom .eot ');
 src : url(' polices / dayrom .eot ?# iefix ') format (' embedded -
opentype ') ,
 url (' polices / dayrom .woff ') format ('woff ') ,
 url (' polices / dayrom .ttf ') format (' truetype ') ,
 url (' polices / dayrom .svg#Dayrom ') format ('svg ');
 font - weight : normal ;
 font - style : normal ; 
}
 body
 {
 background-image: url("C:/Documents and Settings/jamal/Mes documents/myatai/bg.png");
 background-attachment: fixed;
 font - family : 'Trebuchet MS ', Arial , sans - serif ;
 color : # 181818 ;
 
 }
 
 # bloc_page
{
 width : 900px ;
 margin : auto ;
 }
 header
 {
 /* position:absolute;
 bottom:0px;
  */
  float:left;
 height:570px;
 
width : 180px ;
border : 1px solid white  ;
 background-color: white;
 margin-left:180px;
 margin-bottom:95px; 
 margin-top:-20px; 
}
 
section
{
  background-color: rgb(128,255,0);
 border : 5px solid white ;
margin-left:140px;
margin-right:140px;
margin-top:100px;
margin-bottom:100px;
padding-left:27%;
padding-right:100px;
  } 
  h1{
  font-size:20px;
 
  }
 nav li{
  background-color:white;
  color:black;
  list-style: none;
  margin: 0;
  padding: 0;
  color:black;
  }
  . imageflottante
{
 
position:absolute; top:10px; left:100px; 
}

Et merci d'avance.

**Muchos** · 05/08/2012, 20h27

Apparemment, vous n'avez toujours pas corrigé vos erreurs de css pour les images de background.

De plus, s'il y a d'autres problèmes avec Firefox, il faut nous les décrire, pas juste dire que ça ne marche pas.

Enfin, donnez-nous les versions de Chrome et FF que vous utilisez.

**king_soft** · 05/08/2012, 23h27

ou est l'erreur ici?

dans le fichier css:

Code :

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

  background-image: url("C:/Documents and Settings/jamal/Mes documents/myatai/bg.png");

j'ai corrigé par comme ça:

Code :

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

  background-image: url('bg.png');

Mais toujours le meme problème sachant que l'image bg.png se trouve dans le dossier myatai contenant les fichiers du site.

concernant les versions du ff et chrome:chrome j'ai la derniere version et ff j'ai la version 11

**Muchos** · 06/08/2012, 00h47

Il n'y a pas à mettre de guillemets ><'

Code css :

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

1
2
 
body {background-image: url(C:/Documents and Settings/jamal/Mes documents/myatai/bg.png);}

À part ça, aucune raison d'avoir des problèmes, vues les versions des navigateurs.
J'avais aussi proposé que tu nous montres tout ce qui précède ton <body> dans ton html…

**king_soft** · 06/08/2012, 17h56

Bonjour,

J'ai appliqué ça et malheureusement toujours ça marche plus!!
et je veux que ce soit cette page est portable par un client donc c'est pas la peine de préciser le chemin de l'image mais seulement le nom de dossier

Code :

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

 body {background-image: url(myatai/bg.png);}

**sandy94** · 07/08/2012, 00h15

Salut,
Je viens de faire un test avec le code que tu as mis en ligne et qui fonctionne sous Chome mais pas sous firefox ni opéra (CSS non comprise).
J'ai supprimé tous les espaces superflus et cela fonctionne sur les 3 navigateurs de la même manière.
Je te propose le CSS modifié suivant

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
@font-face
{
 font-family:'BallparkWeiner';
 src:url('polices/ballpark.eot');
 src:url('polices/ballpark.eot?#iefix') format('embedded-opentype'), url('polices/ballpark.woff') format('woff'), url('polices/ballpark.ttf') format('truetype'), url('polices/ballpark.svg#BallparkWeiner') format('svg');
 font-weight:normal;
 font-style:normal;
 }
 
 @font-face
 {
 font-family:'Dayrom';
 src:url('polices/dayrom.eot');
 src:url('polices/dayrom.eot?#iefix') format('embedded-opentype'), url('polices/dayrom.woff') format('woff'), url('polices/dayrom.ttf') format ('truetype'), url('polices/dayrom.svg#Dayrom') format('svg');
 font-weight:normal;
 font-style:normal; 
}
 body
 {
 background-image:url("bg.png");
 background-attachment:fixed;
 font-family:'Trebuchet MS',Arial,sans-serif ;
 color:#181818;
 }
 
 # bloc_page
{
 width:900px;
 margin:auto;
 }
 header
 {
 /* position:absolute;
 bottom:0px;
  */
  float:left;
 height:570px;
 
width:180px;
border:1px solid white;
 background-color:white;
 margin-left:180px;
 margin-bottom:95px; 
 margin-top:-20px; 
}
 
section
{
  background-color:rgb(128,255,0);
 border:5px solid white;
margin-left:140px;
margin-right:140px;
margin-top:100px;
margin-bottom:100px;
padding-left:27%;
padding-right:100px;
  } 
  h1{
  font-size:20px;
 
  }
 nav li{
  background-color:white;
  color:black;
  list-style:none;
  margin:0;
  padding:0;
  color:black;
  }
  . imageflottante
{
 
position:absolute; top:10px; left:100px; 
}

Essai ce css et dis moi si cela résoud bien ton problème.

Bonus:
Correction à apporter dans ta page HTML : fermer la balise image qui est dans la section article h1.

Compatibilité des navigateurs

HTML

Discussions similaires

Partager

Partager