Aller au contenu

[Résolu] Problème décalage / cadres flottants / IE


Sujets conseillés

Posté (modifié)

Bonjour à tous,

J'ai un petit problème de décalage sous IE : le bloc de gauche (en float: left) semble pousser le contenu de celui de droite de quelques pixels. J'ai ce problème sous IE et pas sous Firefox ou Opera.

La page incriminée est en ligne ici :

http://www.cti.ecp.fr/~contetc4/test.html

Affichage avec décalage sous IE :

ie.jpg

Affichage correct sous Gecko (Firefox ici) :

gecko.jpg

Et pour les flemmards, voilà le code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="cadre_gauche">
   Remplissage<br />
   du<br />
   cadre<br />
   de<br />
   gauche<br />
</div>

<div class="cadre_principal">
   Une ligne<br />
   Deux lignes<br />
   Trois lignes<br />
   Quatre lignes<br />
   Cinq lignes<br />
   Six lignes<br />
   Sept lignes<br />
   Huit lignes<br />
   Neuf lignes<br />
</div>
</body>
</html>

Et le code CSS :

.cadre_gauche{
float: left;
width: 100px;
border: 1px solid black;
}

.cadre_principal{
border: 1px solid black;
margin-left: 200px;
}

Quelqu'un a des idées pour régler le problème sous IE ?

Modifié par keelize
Posté

Salut,

J'ai rencontré ce problème, mais sans le cadre de droite, une marge était laissée sous ie face au cadre gauche, et pas sur les autres navigateurs.

J'ai résolu ça (de mémoire) avec un padding-left. Le résultat a été : même marge partout...

Conclusion : fait l'essai avec un padding-left dans cadre_principal, sauf erreur de ma part, le résultat devrait être, une marge identique partout dans ton cadre principal. Attention, je dis ça de mémoire, je ne peux pas tester aujourd'hui.... Si tu n'as pas de bonne solution avant demain, je verifierai ce que j'ai fait.

<edit : évidemment, si tu tiens à tout prix à une solution sans marge, ce truc ne va pas, en tout cas, il faut bien choisir la valeur du pad..>

A+

Dino

Posté

Je reprendrai ça dans la soirée. Je me demande s'il ne manque pas une instruction supplémentaire quelque part, du genre clear both.... mais je le dis avec prudence. A bientôt.

Dino

Posté (modifié)

En fait, j'ai vu sur un autre forum (http://www.developpez.net/forums/viewtopic.php?t=158765) que le fait de donner une largeur au cadre_principal redonne (par miracle) un alignement correct.

Mais étant donné que dans mon vrai site web (http://www.cti.ecp.fr/~contetc4/it/partenaires-liste.php) les menus à gauche ont une largeur fixe (en pixel) et que je veux exploiter la totalité de la page sans avoir non plus besoin de scroller horizontalement, je ne peux pas donner de largeur à mon cadre_principal.

Modifié par keelize
Posté (modifié)

Epilogue

Je viens de parcourir une mine d'or sur IE : http://www.positioniseverything.net

et le bug sur lequel je suis tombé est décrit en détails, c'est le "IE Three Pixel Text Jog"

http://www.positioniseverything.net/explor...hreepxtest.html

La solution magique est de donner une hauteur de 1% au cadre_principal :blink:

Me demandez pas pourquoi, allez plutôt le lire sur le site !

Encore merci à tous pour votre aide.

Modifié par keelize

Veuillez vous connecter pour commenter

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



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