[Résolu] Décalage dans Firefox avec display:none

Bonjour,

Je souhaite utiliser la propriété display:none sur un div pour créer un lien lire la suite en css.

Tout marche bien sur IE mais sur Firefox, l'ensemble du site se décalé sur la droite quand le div est masqué et revient en position normale quand il s'affiche.

Connaissez vous ce bug ?
Merci

#cache,#cache2,#cache3,#cache4 {
	width: 570px;
	margin: 0 auto;
	display:none;
}

Modifié par Julihus (10 Mar 2006 - 18:05)

Mmh, je ne sais pas ce que vaut mon conseil, mais pour commencer, je ne vois pas à quoi servent les propriétés width et margin... En effet en appliquant display: none; tu rends ton bloc inexistant, donc il ne devrait en principe pas avoir de largeur définie ou de marge... Donc commence par tester ça (en enlevant width et margin).

Ensuite, il me semble me souvenir avoir eu un problème du même style il y longtemps (bieeen lontemps ^^). En fait lorsqu'on applique un display: none; à un bloc qui se trouve lui même dans un bloc auquel on a appliqué la même propriété, on obtient un décalage, comme s'il y avait un bloc invisible à la place du bloc qui ne devrait pas apparaître... C'est pas très clair ? Voilà un exemple :

Code HTML :

<div class="bloc1">
    <p class="bloc2">blablabla</p>
</div>

Code CSS :

div.bloc1, p.bloc2 {
display: none;
}

Et bien dans ce cas là, le décalage apparaît. En fait, pour résoudre le problème, il faut appliquer le display: none; seulement au bloc le plus grand (celui qui contient les autres).

En espérant t'avoir aidé.

Bonjour,

mat_chab a écrit :
En fait lorsqu'on applique un display: none; à un bloc qui se trouve lui même dans un bloc auquel on a appliqué la même propriété, on obtient un décalage, comme s'il y avait un bloc invisible à la place du bloc qui ne devrait pas apparaître...

Cet "effet" n'a jamais été observé. Quelque-soient les propriétés des éléments descendants, le display:none de l'élément parent retire la totalité des éléments concernés de la structure de formattage établie à partir de l'arbre du document, et supprime tout effet visible.

Peut-être fais-tu une confusion entre display:none et visibility: hidden.

Julihus a écrit :
Tout marche bien sur IE mais sur Firefox, l'ensemble du site se décalé sur la droite quand le div est masqué et revient en position normale quand il s'affiche.

Le problème de décalage vient d'une autre série de propriétés de ta feuille de style. Pour qu'on puisse t'en dire plus, il faut fournir une url de test (ou à défaut, le code CSS et le code HTML correspondants).

Voici l'adresse où vous pouvez observer mon souci :

http://www.ville-unieux.fr/rep_test/decouverte/decouverte.php?page=a_decouvrir&id=a_decouvrir

J'ai le problème sur Firefox uniquement.

Cliquez sur "Lire la suite"
Et en même temps, est ce que cette methode de lire la suite est accessible ?

Merci

Mmh, et quel est ta version de Firefox ? Car chez moi en 1.5 je n'ai pas ce problème.

Cependant il me semble (là encore un souvenir assez flou), que lorsque la page devenait assez longue pour que la barre de scroll s'affiche, le site était recentré en tenant compte de la largeur de la scrollbarre justement ; ce qui se traduit pour les sites de largeur fixe par un décallage à droite... Apparament cela a été corrigé dans la dernière version de Firefox (ce que je n'avais même pas remarqué en fait )

Laurent Denis >> Je persiste et signe, c'était bien la propriété display: none; qui "bugait", et je viens de re-tester et effectivement le bug ne se reproduit pas... Mais là encore ça fait un bon moment que ça m'est arrivé, si ça se trouve c'est également un bug qui a été corrigé. (décidément sont forts pour effacer les preuves chez Mozilla )
Modifié par mat_chab (10 Mar 2006 - 17:49)

Ok...

Effectivement, je n'avais pas pensé à la barre de sroll

Et oui, je galère tellement que je cherche très compliqué !!

Donc ce n'est pas très grave puisque toutes mes pages auront un scroll, je n'

Ok...effectivement je n'avais pas pensé à la barre scroll

Donc ce n'est pas grave car toutes mes pages auront un scroll.

Je cherche vraiment compliqué en fait !!

Merci à tous.