Float + texte qui disparait [résolu]

Bonjour,

Je lis ce forum depuis un certain temps, mais c'est la première fois que je n'arrive pas à trouver une réponse à un problème, alors je me suis dit : "Aller, enregistre-toi, c'est le moment".

Pour mon premier post, je vais essayer d'être clair (enchanté, moi c'est Cédric), et de vous exposer mon pitit soucis...

Lors du chargement d'une des pages de mon site http://www.diamondine.fr/diamant.php , Le début du contenu demeur invisible sous IE (je n'ai pas testé sous FF ou autre, car l'enssemble de nos clients utilise seulement IE, lors qu'ils ont internet !! - c'est une vieille mentalité le bijou...).

Je ne sais pas à quoi ceci est du, car c'est depuis que j'ai rajouté un element de liste à puce dans le menu de gauche (à priori, rien à voir donc !). J'ai essayé de mettre des bordures, de rajouter un <hr />, de modifiers mes marges, mais rien n'y fait...

J'avais déjas vu un post la dessus il y a un moment déja, mais je ne le retrouve plus...

Je vous remerci par avance des réponses que vous pourriez me faire.

Cédric.
Modifié par ze_drix (28 Apr 2008 - 11:19)

Bonjour et bienvenue ze_drix

Je ne comprend pas, j'ai ouvert ta page avec IE et ça s'affiche normalement ???

Je viens de ré-éditer le post avec un lien pour la capture d'écran, et j'ai bien ce problème sur plusieurs PC !!

C'est à s'en arracher les cheveux si chez toi, tout fonctionne normalement !

Chez moi, le début du contenu s'affiche parfois à moitier, parfois pas du tout, et lors que c'est "pas du tout", le fait de scroller vers le bas et de remonter la page résoud le problème... enfin... à moitié !
Je n'y comprend rien...

Merci de ta réponse en tout cas, et de ta rapidité...

Personne ne voit le problème ? Pour tout le monde, c'est ok ?
Modifié par ze_drix (17 Jul 2006 - 13:17)

Heuuuuuuuu ! Testé sur Opera, Firefox et ie6, aucun soucis avec ou sans scroller la page, pour moi elle s'affiche nickel... Quelle version de ie utilises-tu ?
Modifié par dominique (17 Jul 2006 - 13:25)

Alors-là, je reste bouche bée...

J'utilise IE 6.0 et je viens de mettre à jour la capture pour vous montrer l'exemple de ce que j'ai... http://www.diamondine.fr/temp.htm

J'ai aussi effacé les pages internets en cache (histoire d'être sur)
Modifié par ze_drix (17 Jul 2006 - 13:26)

Si vraiment tu y tiens, je peux te faire des captures d'écrans... Mais en général, si je blague, ça se voit

N'y a t'il pas, éventuellement, une config particulière sur vos ie qui provequerait ce problème ?

Est-ce que d'autres ici, peuvent avoir la gentillesse de tester la page pour voir si c'est vraiment aléatoire ? Merci d'avance

Bonjour,

A priori, l'explication est un bug de reflow, liée au haslayout. Autrement-dit, en clair, c'est un trou de mémoire du moteur de rendu d'IE, qui se produira de manière très imprévisible selon la machine, la connection, l'âge du capitaine et la taille de la baleine.

Pour s'en assurer et corriger, tester des propriétés "zoom: 1" sur les éléments en flux qui disparaissent à côté des images. Si le bug se raréfie ou disparaît, faire une CSS en commentaires conditionnelle pour y mettre ces "zoom: 1". Si en outre le problème doit être résolu aussi dans IE5.0 (qui ne connaît pas zoom), faire de même en remplaçant zoom par une des autres propriétés conférant le haslayout: height: 1% est souvent un bon candidat.

Il est également possible d'éliminer le bug, dans certains cas, en supprimant un background du conteneur ou d'un des éléments concernés, et en le reportant à un autre niveau.
Modifié par Laurent Denis (17 Jul 2006 - 13:34)

Wo-ho-ho....

Ca se précise... Mais là, tu viens de me larguer Laurent Denis !! Je ne pense pas être compétent à ce point là, en fait et pour être honnete, j'ai pas tout saisit...

J'aime bien m'occuper de mon site et prendre le temps d'apprendre le x-html + css, mais je reste un diamantaire...

Peut-tu, si je ne t'en demande pas trop, m'expliquer cela plus "simplement" s'il te plait ? Note que j'ai bien compris l'histoire de la baleine...

En tout cas, merci beaucoup
Modifié par ze_drix (17 Jul 2006 - 13:38)

Ayé ! Je viens de reproduire l'erreur...

En faisant des F5 pour actualiser la page... Ce qui est curieux, c'est que tout est bien à sa place, une simple sélection du contenu avec la souris et tout réapparaît... Comme si le texte prenait la couleur du fond...

Hummmmm ! Un truc me gêne, il est possible qu'il manque un ";" quelque part sur ta feuille css, une suggestion, mets systèmatiquement un ";" à la fin de chaque ligne de code... Déjà, tu auras fait disparaître une source d'erreur.

ze_drix a écrit :


Peut-tu, si je ne t'en demande pas trop, m'expliquer cela plus "simplement" s'il te plait ? Note que j'ai bien compris l'histoire de la baleine...

Oups, pardon

Essaie déjà de mettre un:

 #contenu h3, #contenu h4, #contenu p {
zoom: 1
} 

Rapidement testé sur ta page, chez moi, cela semble évacuer le bug.

Si c'est ça, on précisera le code à mettre en place pour corriger plus proprement.
Modifié par Laurent Denis (17 Jul 2006 - 13:44)

Ayé moi aussi !

Je viens de vérifier toute ma feuille de style et j'ai bien des ";" partout, y compris pour les déclarations "solitaires" :
(ex: .hidden{visibility:hidden;} )

...Mais ça résoud pas le problème...

Alors, après avoir mis:

#contenu h3, #contenu h4, #contenu p {
zoom: 1
} 

dans ma feuille de style, j'ai bien le bug qui semnle être résolut sur cette page, en revanche maintenant, ce bout de code m'a décalé la page accueil http://www.diamondine.fr/accueil.htm ... le contenu ne semble plus flotter !!!

Heu... C'est juste mes marges à revoir ou c'est le bout de code qui fait ce genre de choses ? (ça doit pas être les marges puisque les images des deux pages font la même largeur et les mêmes class)

En attendant, je vais me renseigner sur la propriété zoom

Sinon merci beaucoup à vous deux de m'aider ainsi...
Modifié par ze_drix (17 Jul 2006 - 14:11)

Su tu peux ajouter un doigts de code HTML uniquement dans les pages où le bug apparaît, voici le code à ajouter:

<!--[ if lte IE 6]>
  <link href="patch-ie.css" rel="stylesheet" type="text/css" />
<![ endif]-->

(Attention à supprimer les espaces après les crochets ouvrants, que je suis obligé d'ajouter pour que ce ne soit pas pris pour du BBCode par le forum. Voir la FAQ du forum pour le pourquoi du comment de ce code, rubrique "commentaires conditionnels")

et le contenu de la css patch-ie.css sera:

#contenu h3, #contenu h4, #contenu p {
zoom: 1
} 

On peut faire plus proprement et surtout faire un correctif applicable à toutes les pages sans rien dégrader, mais j'avoue manquer de temps dans l'immédiat pour voir cela.

Explication rapide: dans IE, un mécanisme très particulier interfère avec CSS : le "haslayout". C'est en partie une boîte noire héritée d'anciennes versions d'IE, dont le fonctionnement est délicat à élucider. Mais c'est le responsable d'une grande partie des particularités de rendu CSS de ce navigateur.

Grosso-modo, le "haslayout" est un état dont peuvent être dotés les boîtes affichées à l'écran. Ici, l'absence de "haslayout" sur le texte qui se trouve dans #contenu provoque ce trou de mémoire d'IE au moment où il dessine la page en suivant les instructions CSS. On va donc corriger en donnant du haslayout aux éléments qui en ont besoin pour acquérir un certain "poids" qui ne permet plus à IE de les oublier).

On utilise une propriété Microsoft (zoom: 1) pratique pour donner du layout à un élément, mais qui est invalide en CSS. Il nous faut donc une petite feuille de style uniquement pour IE : on se sert des commentaires conditionnels.

Là, le patch est brutal et assez grossier. Mais il faudrait voir la CSS plus en détail pour faire mieux.

Brutal et assez grossier ??

Moi je dirai SUPER MERCI oui...

Je pense que la solution à mon problème est là, pour mon niveau cela me suffit amplement. C'est vrai que si le cas se reproduit, je pense n'avoir pas suffisament compris pour le gerer seul, mais j'aurais au moins un élément de plus à essayer.

MERCI BEAUCOUP A VOUS DEUX...

Hello,

Merci d'avoir signalé ton sujet comme étant résolu. Par contre attention à l'orthographe : cela s'écrit "Résolu" (sans "t").
Une bonne orthographe est importante dans ce cas puisqu'il s'agit justement de faciliter les recherches futures dans le forum.

Bonjour,

Je sais que ce message est assez vieux, mais je suis tombé dessus en recherchant une solution au problème décrit.

Et si je poste, c'est juste pour dire que j'ai pu, pour ma part, résoudre le problème simplement en indiquant un positionnement relatif, dans les CSS, pour le bloc central de ma page qui générait la disparition aléatoire des textes et backgrouds sous Internet Explorer.

Dans mon cas, ce bloc était bien positionné en relatif, donc l'ajout du positionnement dans la CSS a été sans effet secondaire.

Bravo ! J'avais exactement le même problème (disparition du texte à côté d'une image "float").

Et le "zoom:1" a corrigé le problème immédiatement.

Bonjour,

C'est une solution mais ce n'est pas valide w3c... Il y a-t-il une alternative valide au "zoom:1" ?


Merci d'avance