28221 sujets

CSS et mise en forme, CSS3

[Résolu]Decalage avec float sous IE

Bonsoir,

j'ai un décalage sous IE6 qui n'apparait pas sous Firefox 1.0 et Opera 7.6, suite à l'utilisation de floats.

J'ai donc un conteneur principal,positionné en absolu, dans lequel je souhaite aligner 2 div cote a cote. Pour cela j'utilise un float-left de 30px.

C'est en fait le meme principe que ce tuto(voir "Trois blocs côte-à-côte avec un espace de séparation ") sauf que les 3div dans cet exemple devrait être imbriqués dans un div conteneur.

Bon j'avais deja trouvé un moyen visuel d'y arriver mais ca ne me semble pas très propre. Cela consiste à laisser le 2eme div se positionner en dessous du 1er et puis à le déplacer vers la droite et le haut. Ca marche sur tous les navigateurs mais j'aimerais savoir si je ne peux pas arriver au même résultat avec les float.

Merci


La CSS

#centre {
	position: absolute;
	width: 500px;
	height: 522px;
	top: 130px;
	left: 110px;
	background-color:#4F4F4F;
	text-align: justify;
	font-size: 0.75em;
	color: #FFFFFF;
	padding: 15px;
}
#lastLinks {
	height: 200px;
	width: 160px;
        margin-top: 50px;
	margin-left: 30px;
	background-color:#cba;
        float:left;
}
#lastWorks {
	height: 200px;
        width: 250px;
        float:left;    
        background-color:#cba;
        margin-left: 30px;
        margin-top: 50px;
}


Le xhtml
<div id="centre">
	<div id="lastLinks"></div>  
	<div id="lastWorks"></div>
</div>

Modifié le 18 Nov 2004 - 22:47
Deux pistes de solution.

Tu peux essayer d'appliquer un float: left; sur le #centre car il semble que les division en "float" ne s'affichent pas bien dans IE si elles ne sont pas elles-mêmes placées dans une division flottante !

<edit>
Il va de soit qu'on ne peut pas utiliser un position: absolute; avec un float: left;
</edit>

Sinon : 

div#content { 
   margin: 0; 
   /* False margin value for all versions of IE Win, including 6.0 */
   margin-left: 6px; 
}

html>body div#content { 
   /* Correct value for browsers that don't suffer from IE Win's bugs */
   margin-left: 12px; 
}

Modifié le 18 Nov 2004 - 01:08
Merci pour tes solutions.

La 1ere ne semble pas fonctionner, ca ne change rien, ca me paraissait pourtant logique. La 2eme je ne l'ai pas testée mais je pense qu'elle marchera car j'ai déjà eu l'occasion de l'utiliser. Mais finalement je vais garder ma méthode de positionnement absolu que je préfère à un hack.

Encore merci Smiley smile
Sujet clos
Aller à