Discussion :

[bagu]

Bonjour,

J'ai un petit soucis, j'ai mis un backgroud de ce type :

Code :

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

1
2
3
4
5
6
7
8
/* titre de l'article */
h2.pen { 
	background: url('images/titre.gif') no-repeat;
	margin-bottom: 1px;	
	padding: 6px 2px 2px 19px;
	font-size: 19px;
	text-align: left;
	}

Or, si cela fonctionne à merveille sous firefox, cela ne fonctionne pas du tout sous internet explorer.
Le site est visible ici : http://your-world-is.mine.nu

Comment obtenir le même résultat sous Internet Explorer et sous Firefox ?
merci d'avance

[shadowbob]

essaye plutot

Code :

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

1
2
 
background-repeat: no-repeat;

[bagu]

Heu le probleme, c'est que si je fais cela, l'image n'est plus affichée ni sous ie ni sous ff

[Davboc]

tu as bien séparé ?

Code :

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

1
2
background-image:url('images/titre.gif');
background-repeat:no-repeat;

[bagu]

j'avais oublié un point-virgule...

Bon, changement effectué :

Code :

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

1
2
3
4
5
6
7
8
9
/* titre de l'article */
h2.pen { 
	background-image: url('images/titre.gif');
	background-repeat: no-repeat;
	margin-bottom: 1px;	
	padding: 6px 2px 2px 19px;
	font-size: 19px;
	text-align: left;
	}

Et toujours cette différence entre ff et ie...ie n'affiche pas l'image

[Candygirl]

En fait ton problème ne vient pas de l'insertion d'un background, mais de toute une partie du css qui est carrément ignorée par IE. En cherchant à isoler l'endroit qui fesait bugué le css j'ai relevé ce passage:

Code :

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

1
2
3
4
#navcontainer ul li strong a {
	color: #CF7600; /*beige foncé */
	border: 1px solid #CF7600; /*beige foncé */
	}

Dans un premier temps j'ai pensé que peut-être les é posaient problème. En effet, après les avoir viré tout fonctionnait correctement. J'ai alors observé que ton source déclarait utf-8 comme charset. Après une petite recherche sur Google, on trouve qu'on peut spécifier un charset pour la feuille de style: doc w3c. Il te suffit donc de spécifier ceci tout en haut dans ton css:

Code :

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

@charset "iso-8859-1";

Je suppose que ton css a du prendre utf-8 par défaut et que l'accent pose problème à cet endroit (mais je me demande bien pourquoi ici et pas ailleurs ?! ).

[marcha]

Salut,

Comme l'a dit Candygirl, il y a un problème avec les "é", et j'ai investigué quelque
peu pour essayer de comprendre la cause profonde :-)

En fait, la source du problème vient du fait que ta feuille de style est
considérée comme un document encodé avec un charset UTF-8,
ceci parce que ton document html déclare être encodé en UTF-8
(voir la balise meta)

Bon. ok. mais quelle est l'incidence réelle :-) Et bien c'est terrrrriblement
vicieux, et cela nécessite d'abord une petite explication de l'encodage UTF-8

UTF-8 est un encodage où un caractère peut être représenté par
1,2,3,4,5,6,7 ou 8 octets ! Contrairement à iso-8859-1 qui utilise
toujours 1 octet par caractère.

UTF-8 est complètement compatible avec le code ASC-II (7 bits), c'est
à dire que tous les code ASC-II purs (codes non accentués de 0 à 127)
utilisent 1 octet par caractère (7 bits pour être précis). Par contre les
caractères accentués nécessitent plusieurs octets.

Sur la page de Wikipedia qui présente l'UTF-8 il y a un tableau,
Définition du nombre d'octet utilisé http://fr.wikipedia.org/wiki/UTF-8

Comme tu as sans doute édité ton document sur windows, les "é" que tu
as introduits on été mémorisés en tant que code hexa 0xE9 soit en binaire 11101001.

Hors, un code qui commence par trois "1" signifie en UTF-8 le début d'un
caractère utilisant 3 octets. Cela implique que les deux caractères qui
suivent ton "é" en font partie. C'est à dire 1) l'espace et 2) l'étoile "*"

Cela signifie qu'il n'a pas vu la séquence "*/" qui marque la fin de ton
commentaire et la suite du code css a été considérée comme faisant
partie du commentaire et a été ignorée.

On peut s'amuser a simplement ajouter un espace supplémentaire avant
le code "*" pour que le navigateur détecte à nouveau la fin de commentaire
"*/" et tout marche à merveille

Mais la solution de Candygirl est bien meilleure. Par contre j'attire ton
attention qu'il est écrit dans ce document que les en-têtes http on
priorité sur la définition du charset dans la feuille de style !

Sinon, en regardant ton code html, je ne crois pas que tu aie volontairement
utilisé l'UTF-8 ? donc une autre solution à ton problème c'est juste de
modifier le charset avec un "iso-8859-1"

Ouch... j'espère que j'ai été compréhensible :-)