28173 sujets

CSS et mise en forme, CSS3

Bug d'IE-Windows pour le positionnement absolu dans un relatif ?

Bonjour,

Sous IE-Windows, ce lien s'affiche-t-il correctement ?

http://www.pharmimmo.com/mieux/audio-accessoire-I4.html

Il semble que des internautes aient rencontré des problèmes, le cadre de gauche se positionnant par rapport au cadre du centre, et non par rapport à l'extérieur.

Pourtant, le code est très classique, validé et sans problème sous les navigateurs Mac. C'est une simple histoire de positionnement :



form {position: relative}
div#recherche {margin-left: 11em}
div#panier {position: absolute; top: 0; width: 10em}

<body>
<div> ... </div>
<form>
<div id="recherche"> ... </div>
<div id="panier"> ... </div>
</form>
</body>


Donc, le div#panier s'affiche dans le coin gauche haut du form, et pas dans div#recherche.

Si vous connaissez ce bug IE et un correctif, merci d'avance.
pour resoudre le probleme 1 left:0; devrait suffire quand a la cause je l'ignore peut-etre implementation du code html si on considere comme IE le fait peut-etre que l'element enfant #recherche herite du position:relative; de form
Merci de ta réponse.

Effectivement, IE considère div#recherche comme bloc container, donc mettre left: 0 ne sert à rien.
Par ailleurs, la position relative n'est pas héritée, et de toute façon j'ai spécifié une position static pour div#recherche dans la feuille de style.

Il faut chercher ailleurs...
Merci de ta réponse, mais que se passe-t-il si tu tombes sur un navigateur gentiment conforme comme Mozilla ? Il prend le form comme containeur et il balance ton div#panier en dehors de l'écran !!!

Provisoirement, j'ai résolu le problème en mettant d'abord le bloc en prosition absolu, puis le static. Tu peux voir, ça devrait être bon pour IE.

Cela dit, si vous avez des idées pour ce problème, je reste preneur.
left-11em c'est en commentaire qu'il faut le passer de maniere que les nav qui respectent les standards n'en soient pas affecté
Merci de ta réponse, mais mon problème n'est pas les vieux navigateurs qui ne gèrent pas les CSS, mais IE5 ou IE6 Windows qui ne choisit pas le bon container, contrairement à IE Mac ou Mozilla (et équivalents).

C'est peut-être la pésence de quelques input dans le div#panier qui le gêne, j'en sais rien...
les commentaires ne sont pas pour les vieux navigateurs , mais pour attribuer une propriete ou une valeur a IE quelque soit sa version si ce n'est pas precisé dans le commentaire donc si en commentaire tu mets 
<!--[if IE]>
<style type="text/css">
#recherche {
left: -11em;
}
</style>
<![endif]-->
seul IE va attribuer une lmarge negative de 11em les autres FF opera etc... appliqueront le positionnement de ta regle css.
J'ai pensé a autre chose essai de mettre display:block a form
Merci beacoup de ta réponse très intéressante mais je ne veux pas me risquer à des choses aussi compliquées.
Par ailleurs, FORM étant de type block, je ne vois que ça ajoute de mettre display: block, mais il est vrai qu'avec IE on peut s'attendre à tout...
J'ai construit un petit code de test pour voir si IE gère bien le bloc container dans un code simple.
Je t'envoie ça demain, pas le temps aujourd'hui.

Encore merci.
Bonjour,

Petite URL pour test


http://www.touslescables.com/test4.html

J'imagine qu'IE Windows traite bien ce code, à savoir Banner en haut, puis les trois blocs suivants au même niveau.

Mon problème est le même, sauf que mes DIV contiennent un peu de code, et je pense que c'est ça qui pose problème à IE, il doit y avoir quelque part une balise qui ne lui plaît pas.

Qu'en pensez-vous ?
Sujet clos
Aller à