28173 sujets

CSS et mise en forme, CSS3

Float impossible sous IE6 ?

Bonsoir,

Je commence à désespérer à trouver une solution,

Situation:
J'ai un bloc div conteneur,
dans celui-ci je met deux blocs div cote à cote, l'un est le "contenu" l'autre le "menu",
Puis en dehors du conteneur, à la fin il y a un nouveau bloc "footer".

Je souhaites placé le menu à droite du contenu. J'ai essayé float, au début tout marche après j'ai essayé sous IE6 il y a le fameux décalage. J'ai essayé plusieurs méthodes qui n'ont rien données.
J'ai voulu essayé position: absolute sur le "menu", seulement, dans ce cas si mon "menu" est plus grand que mon "contenu" étant donné qu'il sort du flux il empiète sur le "footer". Smiley decu

A mon avis ma seule solution serait de trouver le moyen de faire marcher correctement (du moins le mieux possible) la propriété float sous IE6 Smiley eek Comment faire ?

Avez vous des solutions ? Merci d'avance Smiley ohwell

PS : si vous avez besoin d'un éclaircissement n'hésitez pas à me demander, là il est tard alors j'ai fournit ce que je pouvait.
Modifié par nairolf287 (01 Mar 2008 - 00:02)
Modérateur
bonsoir

si ce sont les 3 px de decallage qui te géne , il y a plusieurs solutions pour gerer ce probleme.

- une marge négative equivalente au 3 px de décallage pour les absorbé dans IE
-un repositionement visuel avec le positionement relatif appliqué dans IE avec les commentaires conditionnels
- positionné le second element du flux lui aussi en float dans la même direction .
- d'autres peut-être ?

Si tu as un probléme de marge doublés dans IE , ce probleme se régle avec l'ajout d'un display:inline , sans incidence dans les différents navigateur , la regle : float l'emporte de toute façon Smiley smile .
Le display:inline n'elimine pas cette marge de 3 pixel incompressible dans IE , ce sont 2 bugs differents.

De plus , l'elements suivant l'element en float peut se comporter de façon differentes.

1) dans IE , dénué de layout , il passe sous le flottant , le contenu est repoussé au bord du flottant . Ce comportement est celui que l'on retrouve aussi par défaut dans les autres navigateurs.
Si l'element se voit conféré le layout par exemple avec un width :xx; , le dit element va prendre le flottant en compte et se caler a coté , les marges externes feront de même .

2) Dans les autres ou le layout est une notion extra-terrestre Smiley smile , un comportement similaire peu-etre appliqué en appliquant un overflow .

une explication de ma part ici pour ne pas me repeter Smiley cligne :
http://www.siteduzero.com/forum-83-173639-foire-aux-questions-x-html---css---javascript.html#r1592291

<edit ajout="
notez que l'exemple proposé se base sur une page sans doctype valide , le display:inline-block; proposé pour IE ne convient pas.
Pour un doctype valide , un zoom:1; fera l'affaire si l'element n'est pas dimensionné . La validité du css mis a defaut par cette simple régle ne vaut pas la peine de se prendre la tête , aucune influence néfaste , si ce n'est que d'eclairer IE Smiley smile .
" />

GC
Modifié par gcyrillus (01 Mar 2008 - 00:54)
Arf,
Ce n'est pas du tout le Three Pixel Jog qui me gène. Ça je l'ai réglé déjà.

Ce serait ça si j'ai bien compris :
a écrit :
1) dans IE , dénué de layout , il passe sous le flottant , le contenu est repoussé au bord du flottant . Ce comportement est celui que l'on retrouve aussi par défaut dans les autres navigateurs.
Si l'element se voit conféré le layout par exemple avec un width :xx; , le dit element va prendre le flottant en compte et se caler a coté , les marges externes feront de même .


Mais je n'arrive pas à appliquer un de ces fameux layout pour que mon élément son directement a coté et pas au dessus Smiley sweatdrop
Administrateur
Bonjour et bienvenue,

nairolf287 a écrit :
PS : si vous avez besoin d'un éclaircissement n'hésitez pas à me demander, là il est tard alors j'ai fournit ce que je pouvait.

Oui un exemple en ligne. Smiley cligne Tu as probablement un width sur un paragraphe qu'IE6 n'interprète pas de la même manière mais je peux pas le deviner d'ici Smiley decu

Ou mieux un zip avec html+css+images (pas obligatoirement les bonnes mais n'importe quoi de même dimension), parce que pour IE6, Firebug n'est pas d'un très grand secours pour chasser le bug ...
Modérateur
bon et bien , il s'agit bel et bien du 3 pixel jog , que tu peut absorber comme ceci:

#contenu_droite{
margin-left:-3px;
}
/* et pendant qu'on y est  */
#contenu_droite , #contenu_gauche {
overflow:hidden; 
/*pour oter l'envie a IE6 et inferieur d'élargir au dela des 211px ou 530px  initiaux de largeur ces conteneurs  */
}


Bien lire et bien comprendre Smiley smile

GC
Modifié par gcyrillus (01 Mar 2008 - 15:38)
Sujet clos
Aller à