Problème CSS avec FireFox 1.5, ok avec la 1.0.7 et IE

[Globulez]

A voir certains sujets, il semble que je ne sois pas le seul a avoir des problèmes avec le images de fond en CSS dans les cellules.
Je dois préciser que j'utilise le CMS Joomla! pour mon site.
Voici ma petite histoire (postée sur un forum Joomla!):

Je me croyais sauvé de ces problèmes lorsque j'ai enfin (!) trouvé un template à mon gout qui passe aussi bien sous IE que FF jusqu'à...
... la sortie de FF 1.5 !

En effet, jeme suis décidé hier à mettre à jour mon Firefox et je me suis empressé d'aller voir mon site pour me familiariser avec cette nouvelle version et - oh surprise - les images de fond de mes colonnes latérales ne sont plus répétées sur toute la hauteur !

Après un petit coup de déprime, j'ai faillis descendre une bouteille mais j'ai pris mon courage à 2 mains pour chercher d'où venais le problème. Index.php, CSS, url et format des images, j'ai eu beau chercher, je n'ai rien trouvé... Crying or Very sad

Alors si quelqu'un a une idée ou a entendu parler d'un bug de cette version de FF, ça m'aiderait beaucoup !

[globulez]

Bon, quelqu'un m'a trouvé une soultion.
Il ne faut pas mettre un ID dans un TD mais lui assigner une Class comme cela :
<td><div id="right_shadow">
<td class="right_shadow">

Bien évidemment, il faut corriger le CSS en conséquence, c a d remplacer
#right_shadow par .right_shadow

Bref, encore une contrainte de plus à prendre en compte...

Globule
(trop de loi tue la loi)

[zelu]

Bonjour,

L'adrsese de ton site permettra surement aux passionnés de Geckozone de t'apporter leur aide.
Car sans matière à réfléchir, il n'y a pas vraiment de problème à résoudre.

C'est l'exemple des éternels :

• ma voiture ne marche plus, ou du
• docteur j'ai mal

Aide-nous à te comprendre !

Quoi que je peux dores et déjà t'annoncer que l'utilisation de tableaux n'est préconisée QUE pour afficher des données tabulées, pas pour faire de la mise en page. Une recherche sur le forum te permettra de t'en rendre compte...

[calimo]

Le problème ressemble à celui-ci : http://www.geckozone.org/forum/viewtopic.php?t=32540

Sans code ni lien il va nous être difficile de voir ce qui se passe. Surtout si tu as changé quelque chose depuis

[globulez]

Le problème ressemble à celui-ci : http://www.geckozone.org/forum/viewtopic.php?t=32540

Sans code ni lien il va nous être difficile de voir ce qui se passe. Surtout si tu as changé quelque chose depuis

Arrgh! Sacré copier/coller !
Le site est http://www.comeonjoomla.net mais j'ai effectivement corrigé le problème depuis.
Par contre, j'ai mis une copie du template sur un Joomla! installé chez Free si vous désirez vous pencher sur le problème...

[calimo]

Aaaargh !!! Pourquoi est-ce que les codes sortis par les CMS doivent toujours être si compliqués

En plus je ne suis pas sur de bien situer le problème là… la page http://laurent.belloeil.free.fr/ me semble tout à fait correcte

[Globulez]

Le problème se situe en ligne 52 :

Code : Tout sélectionner

		<td style="background-image:url('http://laurent.belloeil.free.fr/templates/b_metal/images/ms_bm_05.gif'); background-repeat:repeat-y;"><div id="left_shadow">

Pour que l'image s'affiche, tu vois que j'ai été obligé de la coder en dur alors que c'est le div juste après qui doit la définir. Donc si je mets à la place:

Code : Tout sélectionner

		<td><div id="left_shadow">

tu peux voir mainteant mon problème. Je laisse la colonne de droite corrigée pour apprécier la différence.
Et voici la définition dans le CSS :

Code : Tout sélectionner

#left_shadow{
	background: url(../images/ms_bm_05.gif) repeat-y;
	width: 17px;
	height: 100%;
}

L'adresse de l'image est relative par rapport à l'emplacement du fichier CSS : /templates/b_metal/css/
ce qui donne : /templates/b_metal/images/ms_bm_05.gif
donc le problème ne vient pas de là. De plus, ça fonctionne bien sous IE et FF 1.07

Voilà. Donc maintenant tu as l'erreur à gauche et la soultion (pas élégante car plus de CSS) à droite.

[calimo]

En fait, si tu regardes attentivement, au milieu de la hauteur de cette colonne de gauche tu as un petit trait avec ton images de fond. Si tu mets une bordure rouge à #left_shadow tu le vois clairement apparaître. Il fait visiblement 1px de haut.

Tu as mis height:100%; à ton #left_shadow. 100% de l'élément parent, td donc. Mais quelle est la hauteur de ce td ? Je dois avouer que la mise en page par tableaux a de très nombeux mystères pour moi, je pense que le problème viens de là, mais savoir pourquoi ou comment le résoudre&#133;

[Globulez]

La hauteur du TD est à 100%. OK.
Mais sa hauteur est normalement commandée par le TR, qui l'est lui-même par le contenu des autres cellule de la ligne (au minimum) :

TD.h=100%(TR.h)

(TR est le conteneur de TD et .h est la propriété 'hauteur')
Avec l'extension WebDevelopper, si je fais Outline TabCells, on voit clairement que le TD ne fait pas 1px de hauteur

Si je suis ton explication, ça signifie qu'il calcule le nombre de répétitions nécessaires par rapport à la hauteur du contenu de la cellule seule et qui est une image de 1px de haut, sans tenir compte du parent TR...

TR -> H = h du TD le plus grand
|_ 100%=1 px donc on ne répète pas l'image de fond!
|_ 100%=n px (>1)
|_...
|_...
|_...

Il calcule avec des oeillères, alors.
C'est un vrai fonctionnaire !

Ou alors il existe une règle du W3C que j'ignore?

[calimo]

Ou alors il existe une règle du W3C que j'ignore?

La mise en page des tableaux est incroyablement compliquée comme plusieurs sujets l'attestent. Il y a plein de règles cachées, et je ne serais pas étonné que ce soit le cas ici. À vrai dire je n'en sais vraiment rien Tu peux jeter un oeil : http://www.yoyodesign.org/doc/w3c/css2/tables.html

Je ne peux que te conseiller de te passer de ces tableaux qui ne sont pas du tout prévus pour faire de la mise en page, qui posent de gros problèmes d'accessibilité et accessoirement aussi de mise en page (ça commence à faire beaucoup là)

[Globulez]

Je crois que j'ai trouvé :

Note that the height of the containing block of an absolutely positioned element is independent of the size of the element itself, and thus a percentage height on such an element can always be resolved. However, it may be that the height is not known until elements that come later in the document have been processed.

C'est dit un peu après le milieu (10.5) de cette page.
(ce pargraphe a disparu dans la traduction que tu as indiqué)

Le problème est que je suis plutôt médiocre en mise en page et surtout en CSS! Je me suis essyaé à modifier le template SolarFlare qui est livré de base dans Joomla! et fait beaucoup appel au CSS mais les résultats se sont révélés catastrophiques !

En ce moment, je suis parti sur Ajax.NET(en plus des trad. pour Joomla!) alors on verra plus tard...

[Globulez]

Comme je n'aime pas laisser la machine gagner, j'ai fait siffler ma cocotte minute sur ces histoire d'héritage contenant/contenu et j'ai regardé à nouveau le code. Il m'a soudain paru étrange de mettre un DIV dans un TD puisque ce DIV doit s'appliquer à tout le TD et pas seulement son contenu.
C'est ainsi que j'ai trouvé la solution :

Code : Tout sélectionner

<td id="left_shadow"></td>

Tu peux vérifier, c'est bon.
Et en plus, c'est plus clair !
Encore bravo à FireFox de nous obliger à travailler proprement.


PS : Ca serait sympa si un modo pouvait mettre [réglé] dans le titre du fil car je l'avais ouvert de façon anonyme.