28172 sujets

CSS et mise en forme, CSS3

[Résolu] Feuille css externe - Comportement étrange

Bonjour,

Je suis confronté à un problème qui n'est vraiment pas habituel avec ma feuille de style externe.
Voici le bloc XHTML concerné:


		<div class="wall_item">
			<div class="wall_item_left">
				Avatar
			</div>
			<div class="wall_item_right">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
			</div>
		</div>


Le CSS qui correspond:

.wall_item {
	background-color: blue;
	position: relative;
}

.wall_item_left {
	width: 75px;
}

.wall_item_right {
	position: absolute;
	left: 75px;
	top: 0;
}


Jusqu'ici, tout semble correct, sauf que pour le bloc conteneur ("wall_item"), le style correspondant n'est jamais pris en compte !! J'ai essayé :
- de changer temporairement la déclaration en tant que "class" vers un "id", et d'adapter le css en conséquence
- de déplacer le fragment de code XHTML dans la page (par exemple en dehors de out autre élément)
- de déplacer le fragment de code CSS dans la feuille de style
- de changer les noms de déclaration des éléments
- de valider le code de ma page pour voir si je n'avais pas des balises mal fermées
- de simplifier au maximum les choses en déclarant juste <div class="wall_item">TEST</div> et début de ma page

Rien n'y fait Smiley decu

Ce que j'observe :
- Avec Firebug, si je sélectionne la balise conteneur, il ne trouve pas la séquence CSS correspondante dans la feuille de style
- Tout est ok avec les deux blocs à l'intérieur du conteneur, je peux leur appliquer des styles, etc...
- Si je déclare mes styles "en ligne", directement dans la balise <div class="wall_item">, tout fonctionne

Sinon, tout ça se passe sur MAC OS, Firefox 3.5.3

Quelqu'un a-t-il une petite idée?

Merci !
Modifié par SuD (12 Oct 2009 - 07:08)
Hello,

ben comme je ne vois pas pourquoi ça ne marcherait pas et que les autres styles de la feuille externe sont appliqués je ne vois que 2 solutions :
* tu as une autre déclaration avec une priorité plus importante sur wall_item (mais je suppose que tu as déjà vérifié).
* ta css est encodée en utf8 avec BOM et la première déclaration n'est pas reconnue à cause du 
Modifié par Heyoan (12 Oct 2009 - 06:51)
Salut Heyoan,

a écrit :
* tu as une autre déclaration avec une priorité plus importante sur wall_item (mais je suppose que tu as déjà vérifié).

En effet, aucune autre déclaration sur cet élément

a écrit :
* ta css est encodée en utf8 avec BOM et la première déclaration n'est pas reconnue à cause du 

Je n'ai jamais eu de problèmes de ce genre... mais peux-tu m'en dire un peu plus à ce sujet? Qu'est ce que je peux faire concrètement pour tester?

Merci !

EDIT : pour info, j'utilise textmate
Modifié par SuD (12 Oct 2009 - 07:01)
SuD a écrit :
Je n'ai jamais eu de problèmes de ce genre... mais peux-tu m'en dire un peu plus à ce sujet? Qu'est ce que je peux faire concrètement pour tester?
J'étais en train de relire et ça ne peut pas être ça puisque tu dis avoir essayé de déplacer tes blocs css.

Concrètement la BOM donne quelque chose comme ça :
.wall_item { 
    background-color: blue; 
    position: relative; 
}
Et la déclaration n'est jamais reconnue.
Modifié par Heyoan (12 Oct 2009 - 07:04)
Ok, en effet ça ne peut pas être ça... Aussi, j'ai essayé en déclarant div.wall_item et ça ne change rien.
Je viens juste de résoudre finalement. Il y avait un espace qui était sans doute un caractère spécial dans ma déclaration. Le validateur W3C me disait :
a écrit :

Lexical error at line 176, column 11. Encountered: "?" (63), after : "" .wall_item??{ background-color: blue; position: relative; }

J'ai donc supprimé ce caractère fantôme, et ça fonctionne Smiley smile

Merci !
Alors je ne vois pas Smiley hmm .

J'ai déjà eu des comportements étranges à cause de commentaires particuliers ou de caractères invalides mais je ne sais plus dans quels cas...


Edit: Cool ! Smiley smile
Modifié par Heyoan (12 Oct 2009 - 07:10)
Heyoan a écrit :

J'ai déjà eu des comportements étranges à cause de commentaires particuliers ou de caractères invalides mais je ne sais plus dans quels cas...


J'ai déjà eu ce problème aussi ; les puces présentes dans un .pdf devenaient des caractères invisibles dans dreamweaver cs4.
Sujet clos
Aller à