Aller au contenu

Positionnement absolu et texte intermittent


Sujets conseillés

Posté

Bien le bonjour!

Je me pose une question, à savoir si je suis le seul en ce bas monde à vivre ce problème:

j'ai un bloc en positionnement absolu dans une page (c'est le genre de positionnement que je n'utilise jamais, pas assez flexible et beaucoup de différences entre IE et le reste de l'univers). Ce bloc s'affiche très bien dans Mozilla (et Firefox), mais dans IE, j'ai un problème bizarre...

La boîte disparaît selon la taille des caractères (du plus grand au plus plus petit, elle disparait à la moyenne et aux extrêmes). J'ai testé en enlevant la propriété

position:absolute;

dans ma CSS, et le bug ne se produit plus.

Je suis vraiment perplexe... La boîte ne se déplace pas, elle disparait, tout simplement. Et ce n'est pas comme le classique problème des multiples float qui disparaissent en scrollant et réapparaissent en sélectionnant le texte...

Si quelqu'un a une piste...

Posté

Comme je l'ai dis y'a pas si longtemps, IE se perd entre les bloc à position absolu et le reste, du coup ... il efface !

Pour "corriger" le problème, il faut donner aux éléments une position relative, ce qu'ils devraient avoir normalement :

div,h1,h2,h3,p { position: relative; }

Au tout début de ta CSS

Posté (modifié)
Pour "corriger" le problème, il faut donner aux éléments une position relative, ce qu'ils devraient avoir normalement :

div,h1,h2,h3,p { position: relative; }

Au tout début de ta CSS

Hum... peux-tu préciser un peu le "ce qu'ils devraient avoir normalement" ? Je ne suis pas sûr qu'il y ait un bug d'IE dans ce cas (ou alors, je l'ai loupé, celui-là ;) )

En effet, normalement, c'est à dire par défaut, les éléments n'ont pas de positionnement : ils sont en flux. Tous les navigateurs, y compris IE, respectent cette règle.

(Les positionnements (absolu, fixe) et le float consistent justement à extraire le bloc concerné du flux.)

D'autre part, le positionnement absolu (et le fixe) ont une règle souvent oubliée :

- par défaut, le bloc est positionné par rapport au bloc conteneur initial, c'est à dire en pratique la fenêtre d'affichage du navigateur.

- pour le positionner dans les limites d'un autre bloc conteneur, il faut que ce dernier soit lui-même en position relative (sans forcément être déplacé, donc éventuellement sans mention de top: ni de left:...)

Il arrive souvent que l'oubli de ce position:relative à appliquer au bloc conteneur provoque des rendus suprenants et déroutants ;)

Modifié par LaurentDenis
Posté
La boîte disparaît selon la taille des caractères (du plus grand au plus plus petit, elle disparait à la moyenne et aux extrêmes). J'ai testé en enlevant la propriété
position:absolute;

dans ma CSS, et le bug ne se produit plus.

Gou, peux-tu donner une url vers le code source ? ce sera plus facile ;)

Posté
Gou, peux-tu donner une url vers le code source ? ce sera plus facile

Hummm... j'ai mis le code et la css sur un site perso temporairement... Pour voir ce dont je parle, il faut agrandir et réduire la taille du texte (ctrl-roulette sur PC) dans Internet Explorer. Vous allez voir du texte en haut à droite (c'est écrit «Profil» et «Accueil des services»).

Je ne suis vraiment pas friand du positionnement absolu... mais la mise en page n'est pas de moi, je dois faire avec...

Merci si vous trouvez une solution!

(je vais continuer à plancher là dessus...)

Posté

Bonjour,

Je pense que la réponse de Laurent pointe bien vers la cause du problème

- pour le positionner dans les limites d'un autre bloc conteneur, il faut que ce dernier soit lui-même en position relative (sans forcément être déplacé, donc éventuellement sans mention de top: ni de left:...)

IE comprend que le bloc "profil" est positionné par rapport au conteneur initial (la fenêtre du navigateur).

Findel avait raison aussi.

Essaie en précisant l'attribut position:relative; pour l'élément qui contient le bloc "profil"

Posté

Problème réglé... du moins, en partie!

Merci de vos conseils, ça m'a mis la puce à l'oreille... surtout cette phrase de Findel:

Comme je l'ai dis y'a pas si longtemps, IE se perd entre les bloc à position absolu et le reste, du coup ... il efface ! (sic)

Éloquent!

J'ai corrigé le tir en positionnant mon bloc en relatif plutôt qu'en absolu. De cette façon, IE semble avoir moins de réticences à l'afficher. Par contre, c'est nettement plus complexe de le positionner au bon endroit... un jeu de marges négatives et de top ou de right...

Il semblerait que même de positionner mon bloc conteneur en relatif n'ait pas été suffisant...

Maintenant de peux passer aux autres problèmes! argh! pourquoi IE??

*soupir!*

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...