Compatibilité des navigateurs

Version imprimable

05/08/2012, 16h36
king_soft

Compatibilité des navigateurs

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.
05/08/2012, 19h05
Muchos

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.

Ok donc voila mes codes:

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

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.

05/08/2012, 20h27
Muchos

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.
05/08/2012, 23h27
king_soft

ou est l'erreur ici?

dans le fichier css:

Code:

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

j'ai corrigé par comme ça:

Code:

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
06/08/2012, 00h47
Muchos
Il n'y a pas à mettre de guillemets ><'
Code:

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…
06/08/2012, 17h56
king_soft

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:

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

Il faut supprimer tous les espaces superflus de CSS

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:

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.