Aller au menu - Aller au contenu

Image qui ne s'affiche pas sous Firefox…

… alors que sous webkit, oui

Pour accéder à cette section
Connectez-vous !
connexion_rpx
Page 1 
Auteur Message
1 visiteur sur ce sujet (1 Anonyme)
Page 1 
Hors ligne LaTomateFrivole # Posté le 04/07/2009 à 10:59:02
My only wish is to be EATEN
Avatar
Bonjour amis Zer0s :)

Il se passe un probleme avec une de mes pages en HTML 5… 
Il se trouve que sous Firefox l'affichage d'une image (censée être affichée par #banniere ) n'a pas lieu, même si le bloc #banniere est bien présent ; cependant avec Webkit il s'affiche… bizarre o_O
Voici les codes :
Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>

<html lang="fr">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="main.css" rel="stylesheet" type="text/css">
<base href="http://oungawascript.free.fr" target="_blank">
<title>C'est un mec qui rentre dans un cafe…</title>
</head>

<body>
<div id="fond_banniere"></div>
<div id="banniere"></div> 
<div id="titre"> C'est l'histoire d'un mec qui rentre dans un cafe…</div>

<article class="histoire"> qqchose</article>
<article class= "histoire">qqchose d'autre.</article>

</body>


</html>

Code : CSS
 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
@font-face { font-family : 'Ringfinger';
src: url('ringfinger.ttf') format('truetype'); }

body 
{
	margin-left: 25%;
	margin-right:25%;
	margin-top: 250px;
	background-color: #FFE796;
}

#banniere {
	background-position: 0px 0px;
	background-repeat: no-repeat;
	position: absolute;
	left: 0px;
	display:block;
	width: 800px;
	height : 250px;
	top:0px;
	background-image: url(banniere.png);
	margin-bottom: 10px;
}

#fond_banniere {
	position: absolute;
	left: 0px;
	top:0px;
	display:block;
	width : 100%;
	height : 115px;
	background-color: #672C2D;
	border-bottom: solid 2px #675D5D;
	margin-bottom: 10px;
}

#titre {
	
	position:absolute;
	text-align: center;
	width: 500px;
	height:100px;
	top : 3px;
	left : 400px;
	font-family: "Ringfinger", "Courier New", sans-serif;
	font-size: x-large;
	color: #FFE796;

	
}



.histoire {
	color: #FFE796;
	font-family: "Comic Sans MS", Arial, sans-serif;
	font-size: large;
	display: block;
	background-color: #672C2D;
	width:500px;
	height:auto;
	
	padding : 20px;
	margin : 70px;
	line-height: 20px;
	line-break: 30 px;
	
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border:5px solid #FFB05E;
	
	-moz-border-top-colors: #672C2D #FFE796;
	-moz-border-left-colors: #672C2D #FFE796;
	-moz-border-right-colors: #672C2D #FFE796;
	-moz-border-bottom-colors: #672C2D #FFE796;
}


Voilà :) Merci de m'aider! @+

PS : je me souviens d'un site qui permettait de tester une page Web sur différents navigateurs mais je l'ai perdu… quelqu'un se souvient d'un truc du même genre?
Macintosheux
Métaleux, Noiseux
Bidouilleur d'ambiances à ses heures perdues
 
Hors ligne ezano # Posté le 04/07/2009 à 11:34:04
Avatar

Ville : Perros-guirec
Pays : France métropolitaine
études : IUT Lannion
L'adresse de ton image doit pas être un truc du style:

url("../banniere.png");

Faut commencer par 2 points je crois, il faut aussi que ton image soit dans le même dossier que ta page sinon faut agrandir ton chemin relatif.
++++++++++[>+++++++>++++++++++>+++>+<<<<-]
>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.

Cherche petit rat, du côté de Lannion en Bretagne, à donner ou à vendre c'est selon.
 
Hors ligne bizerte77 # Posté le 04/07/2009 à 11:45:34

Ta bannière n'est pas dans un dossier images?

url(images/banniere.png)
Hors ligne LaTomateFrivole # Posté le 04/07/2009 à 12:48:51
My only wish is to be EATEN
Avatar
Non… elle est bien dans le même répertoire… j'ai essayé avec ../ même comme je m'y attendais ça ne marche pas… si ça marche avec Safari je ne pense pas que ce soit un problème d'URL… :(
Macintosheux
Métaleux, Noiseux
Bidouilleur d'ambiances à ses heures perdues
 
Hors ligne Trillela # Posté le 04/07/2009 à 12:56:57
Pika il est trop beau !!
Avatar
Ton code html est complet la ? ton doctype est surement le problème dans se cas la.
Pour un forum plus claire passez votre sujet au vert une fois résolu !

 
Hors ligne LaTomateFrivole # Posté le 04/07/2009 à 13:04:00
My only wish is to be EATEN
Avatar
Oui mon code est complet…mais j'ai lu dans la documentation que c'était ce doctype qui convenait pour HTML 5.0 (je l'ai fait validé)… mais peut-être effectivement que mon problème vient de là.
Macintosheux
Métaleux, Noiseux
Bidouilleur d'ambiances à ses heures perdues
 
Hors ligne Trillela # Posté le 04/07/2009 à 13:08:36
Pika il est trop beau !!
Avatar
Officiellement il n'est pas encore sortie donc je vois mal comment FF pourrait lire correctement se doctype.

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!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></title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   </head>
   <body>
       
   </body>
</html>


Essaille avec celui la
Pour un forum plus claire passez votre sujet au vert une fois résolu !

 
Hors ligne LaTomateFrivole # Posté le 04/07/2009 à 14:22:24
My only wish is to be EATEN
Avatar
Ca ne marche toujours pas... :(
[EDIT]J'ai mis un truc "text-shadow" dans mon css qui marche sous Safari, mais toujours pas sur Firefox… une piste?[/EDIT]
Édité le 04/07/2009 à 14:25:51 par LaTomateFrivole
Macintosheux
Métaleux, Noiseux
Bidouilleur d'ambiances à ses heures perdues
 
Hors ligne Trillela # Posté le 04/07/2009 à 15:00:16
Pika il est trop beau !!
Avatar
j'editerais plus tard me suis tromper
Édité le 04/07/2009 à 15:00:46 par Trillela
Pour un forum plus claire passez votre sujet au vert une fois résolu !

 
Hors ligne LaTomateFrivole # Posté le 04/07/2009 à 16:11:50
My only wish is to be EATEN
Avatar
Ah! pour les ombres j'ai téléchargé Firefox 3.5 et ça marche ; mais toujours pas d'images.
Macintosheux
Métaleux, Noiseux
Bidouilleur d'ambiances à ses heures perdues
 
Hors ligne bizerte77 # Posté le 05/07/2009 à 00:53:19

Cette réponse a aidé l'auteur du sujet Cette réponse a aidé l'auteur du sujet
Salut

J'ai testé ton code chez moi, j'ai tout mis dans le même dossier (la page, le css et l'image).

J'ai pris une image à moi que j'ai renommé banniere.png et tout marche bien, elle s'affiche bien sous firefox tout comme sous internet explorer 8 (j'ai pas testé les autre), j'ai également testé avec opéra, tout fonctionne...

Donc je ne comprend pas pourquoi chez toi ça marche pas!

Voili voilou
Hors ligne LaTomateFrivole # Posté le 05/07/2009 à 11:53:33
My only wish is to be EATEN
Avatar
Merci à toi bizerte77 et aussi à Trirella, mais je comprend toujours pas pourquoi ca mache pas... :( Peut-être Firefox pour mac?
Macintosheux
Métaleux, Noiseux
Bidouilleur d'ambiances à ses heures perdues
 
Hors ligne LaTomateFrivole # Posté le 06/07/2009 à 14:38:16
My only wish is to be EATEN
Avatar
up?
Macintosheux
Métaleux, Noiseux
Bidouilleur d'ambiances à ses heures perdues
 

Retour au forum "XHTML / CSS" ou à la liste des forums

Pour accéder à cette section
Connectez-vous !
connexion_rpx