comment aligner les flottants dans IE6

Question

J'ai des problèmes pour afficher les paragraphes flottants et les images dans IE6. Cependant, il n'y avait aucun problème à afficher ceux d'Opera et de Firefox. J'ai trois divs à l'intérieur d'un conteneur. Chaque div a son propre paragraphe et l'image flottait à gauche ou à droite. Pour que je puisse obtenir la disposition désirée, je définis des marges négatives sur la plupart des paragraphes et des images.

Voici comment je les flotteurs: aligné

---- code CSS pour le conteneur -----

.container { 
clear:both; 
background:url(images/content_bg.png) repeat-x scroll 0 0 transparent; 
width:850px; 
height:750px; 
overflow:hidden; 
margin:0 auto; 
} 

----- code CSS pour la première div - ---

.row1 { 
float:left; 
width:790px; 
height:460px; 
margin:5px 0 0 40px; 
} 

.pic1 { 
float:right; 
height:460px; 
width:382px; 
margin:-100px -50px 0 -60px; 
} 

h2, p { 
font-family:Arial, Helvetica, sans-serif; 
} 

.row1 p { 
font-size:12px; 
text-indent:20px; 
font-weight:bold; 
text-align:justify; 
margin:-10px -25px 0 0; 
position:relative; 
} 

Code ----------- pour la 2ème div -------------

.ro2 { 
float:left; 
width:790px; 
height:234px; 
margin:-185px 0 0 28px; 
position:relative; 
} 

.row2 p { 
float:right; 
font-size:12px; 
font-weight:bold; 
text-align:justify; 
text-indent:20px; 
margin:-195px 258px 0 175px; 
position:relative; 
} 

.pic2 { 
float:left; 
} 

Code --------- pour la 3e div ---------------

.row3 { 
float:left; 
width:790px; 
height:203px; 
margin:-10px 0 0 40px; 
position:relative; 
} 


.row3 p { 
float:left; 
font-size:12px; 
font-weight:bold; 
text-indent:20px; 
text-align:justify; 
margin:-180px 265px 0 10px; 
position:relative; 
} 

.pic3 { 
float:right; 
} 

hauteur Les divs (.row1 à .row3) sont basé sur les hauteurs des images afin que le div puisse contenir à la fois les paragraphes et les images. Les paragraphes semblent être loin des images lorsqu'ils sont vus dans IE6. Certains paragraphes se chevauchent avec d'autres images.

Answer 1

IE6 il est pas pris en charge et contient de nombreux "bugs" ... vous devriez développer pour IE7 et plus ...

au sujet de votre css:

vous utilisez position: relative; mais ne définissant aucune des coordonnées, IE6 n'aime pas ça, essayez de le supprimer!

Vous ne montrez pas où toutes les classes sont appliquées, certaines balises HTML ne vont pas bien avec la marge dans IE6, essayez d'utiliser le remplissage à la place.

un bon moyen pour vous de travailler bien dans IE6 est d'utiliser la table au lieu de div, mais div fonctionne très bien comme ceci:

<div class="container" style="width:800px;"> 

    <div class="block" style="width:750px;margin:0 auto;"> 
    <div class="img_container" style="float:left;width:350px;"></div> 
    <div class="txt_container" style="float:right;width:400px;"></div> 
    </div> 

    <div class="block" style="width:750px;margin:0 auto;"> 
    <div class="img_container" style="float:left;width:350px;"></div> 
    <div class="txt_container" style="float:right;width:400px;"></div> 
    </div> 

    <div class="block" style="width:750px;margin:0 auto;"> 
    <div class="img_container" style="float:left;width:350px;"></div> 
    <div class="txt_container" style="float:right;width:400px;"></div> 
    </div> 

</div> 

Voici un exemple, pour illustrer le fait que vous devriez pour IE6 envelopper le texte et les images dans un div et que div est celui de flotter ...

Hope it helps ...

Answer 2

IE6 a un bug affectant les flotteurs qui fait des marges double de leur valeur réelle. Je parie que c'est le problème, vu que vous avez des marges définies, et dit: «Les paragraphes semblent être loin des images lorsqu'ils sont vus dans IE 6. Certains paragraphes se chevauchent avec d'autres images."

Heureusement, il existe une solution simple pour cela - chaque fois que vous définissez un flottant, réglez aussi 'display: inline'. Cela n'affectera pas les autres navigateurs et empêchera IE 6 de doubler les marges.

Voir positioniseverything's article on this. Notez que vous devez voir la page dans IE6 pour que les exemples aient du sens.