28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous et à toutes,

J'ai un problème avec IE 7 sur un positionnement flottant.

J'ai deux divs qui sont contenu dans une divs. Chaque div fait 45 % de large (50% pour les navigateurs récent et 45% pour les anciens pour éviter des cumul de marges).

Lorsque je suis en pleine largeur sous IE 7, mes float ne se font pas, la colonne de gauche et bien à gauche, et celle de droite bien à droite, mais les unes en dessous des autres.

Si je réduit de quelques pixels la largeur de ma fenêtre, ca ne me le fait pas, tout apparait normalement.

J'ai essayé les différentes méthode que j'ai pu trouver sur le forum, mais sans succès (je parle de display inline, inverser les float ...)

Merci pour votre aide, le lien de la page concernée
Modifié par Super_baloo8 (21 Mar 2007 - 16:22)
Salut,

ce ne serait pas un problème d'arrondis ? (chercher sur le blog d'Alsacreations, IE + arrondis)

J'avoue que j'ignore comment IE7 se comporte à ce niveau ...
div.membre_gauche est flottant à gauce et a une largeur de 50%.
div.membre_droite n'est pas flottant, a également une largeur de 50%, et une marge à gauche de 50%.

Théoriquement, ça ne devrait pas poser de problème.

Interviennent alors deux soucis d'IE :
1. le HasLayout ;
2. le bug d'arrondi des dimensions en pourcentages.

Le width: 50% sur div.membre_droite confère le layout à ce bloc dans IE Windows. Or, un bloc qui a le layout ne peut plus être survolé par un flottant (pour mémoire, le cas normal est le suivant : les flottants ne repoussent pas les blocs -- d'où la marge à gauche de 50% -- mais uniquement leur contenu de type inline). Comme la colonne de droite ne peut plus être survolée par les flottants, il faut qu'elle tienne dans l'espace de droite, faute de quoi elle passera à la ligne.

C'est là qu'interviens le bug d'arrondi des dimensions en pourcentages : paf, un mauvais arrondi (pixel de trop), et il manque un pixel pour faire tenir la colonne de droite, qui passe à la ligne.

Voilà pour le diagnostic.

Ordonnance : supprimer ce width: 50% sur div.membre_droite. Non seulement il ne sert strictement à rien, mais en plus il nous crée des problèmes. Smiley biggol
Merci Thomas D. Et Florent V.

Je ne connaissais pas ce bug de l'arrondi d'IE. J'ai suivi l'ordonnance à la lettre, et ma page ne tremble plus Smiley lol

MEERRCCII