[RESOLU] Problème positionement float:Right IE

Bonjour,

J'en arrive à une solution plus radicale, vous posez la question, étant donné que ça fait 3 jours que je lutte la dessus, il me semble avoir tout essayé, ... mais non !

Voici le problème:

La page qui pose pwoblem

En fait le div que j'ai coloriser en bleu pour vous facilitez la lecture de la page est placée en float, avec une margin right. (elle est à droite de la div "content". Or Firefox, pas de problème, Opéra, nickel, .. mais ie, il se barre à gauche et mon div "content" est contraint à descendre. J'ai vraiment tout essayé et je vois pas.

Je vous copie la partie de ma css concernée:

body, div, p, h1, h2, h3, form, img, li, ul, fieldset {
	margin: 0px;
	padding: 0px;
}
body{
	background-color:#898988;
}
#container{
	width: 874px;
	margin: auto;
	background-image:url(img/bg_container.gif);
}
#header{
	background-image:url(img/header.png);
	width:734px;
	height:146px;
	margin-left:68px;
}
#menu{
	width:734px;
	height:25px;
	margin-left:68px;
	list-style: none;
	}

#content{
	clear:left;
	width:525px;
	height:auto;
	margin-left:68px;
	background-image:url(img/bg_content.gif);
}

#droite{
//padding:0px;
float:right;
width:208px;
height:300px;
margin-right:72px;
margin-top:50px;
background:#003366;
}

Vraiment je vois plus, .. je suis à 2 dois de changer complétement ma mise en page pour contourner le problème, mais si quelqu'un a une idée, ça me comblerai de bonheur!
Modifié par ol.li (16 Mar 2006 - 13:03)

Salut

Pour ce genre de soucis quelques petites choses à penser :

- la longueur totale si tu indiques des px dans tes width (il ne faut pas par exemple que ton contenair soit à 900px et deux <div> dedans soit à plus de 900px de width à eux deux (ex : 700px + 250px n'est pas bon donc); Dans le même soucis les margin, padding, border se rajoutent...

- il faut que ton élément de gauche porte float:left;

Voilà déjà quelques pistes si ça peut être utile...

Merci des conseils,

Cependant, j'ai déjà essayé tout ça ...

Or float: left pour le div de gauche, ça change rien.

Et puis pour les marges, .. tout additionné, j'ai 1px de moins que mon container.

Modifié par ol.li (13 Mar 2006 - 19:09)

Essaies pour voir d'avoir encore moins de 1 px de différence, genre 50 px pour voir le résultat... Ca indiquera si c'est un soucis de taille ou autre chose...

Non, j'ai refait une série de tests, rien à faire...

Enfin, en tatonant, j'arrive à bien le placer pour IE, ... mais alors là, sous Firefox ou Opéra il est complétement décallé.

En fait pour préciser,

J'ai une margin-right sur mon div qui se colle à droite

(72px de marge)

or pour cette valeur, IE pousse beaucoup plus ma boite que tous les autres navigateurs .. d'où tous les soucis de mis en page

(au passage, sous IE7, ya plus le problème)

J'en déduis que le problème vien tplus du navigateur que de moi même, .. mais ça n'apporte pas de solution !
Modifié par ol.li (13 Mar 2006 - 20:48)

Bonjour ol.li

J'ai essayé ceci sur ta page : page de test

J'ai placé ton div "content" avant ton div "droite" dans le code html.

Modif' sur #droite :

Suppression du float: right;
Ajout d'un margin-right: 530px;

Regarde ce que ça donne avec tes images.

a+

Salut Coingpomme, merci d'avoir mis le nez dans le probleme,

J'ai repris tes modifs, et le résultat est sensiblement le même,

La margin du DIV float, fait nimp sous IE

voilà le résultat
-> comme toujours, nickel ac firefox et opéra et IE fait le bazar

Modifié par ol.li (13 Mar 2006 - 22:56)

Salut,

Bon, j'ai remis le nez un peu plus dans le cambouis

Faudrait voir à retailler tes images "top_content.gif" et son pote "bottom_content.gif". Tu as près de 15 à 20px de blanc à gauche qui ne servent à rien (je n'ai pas mesuré sur Fireworks, mais je dois pas être loin du compte). Pareil pour "top_news.gif" et consorts.

Je te conseille aussi de réduire la largeur des images "top_content.gif" et "bottom_content.gif". Il faut que la largeur de #content et #droite avec leurs marges respectives soit en dessous de tes 734px, ce qui n'est pas le cas, d'où ton problème...

Tu es sur fond blanc donc n'hésites pas à découper au plus près tes éléments images. Ensuite tu pourras mieux gérer les marges de chacun avec CSS. Les décalages sous IE ne devraient plus poser de problèmes après un petit coup de bistouri bien placé et une petite modif' dans les "margin" de #content et #droite.

La FAQ d'Alsa pourra aussi t'en dire plus sur les marges et décalages

J'en suis venu à bout :

Page ok sur FF et IE

Je t'ai rajouté un div #test pour englober tes div #header, #menu...
Le souci c'est que ces div étaient placés dans #container avec un "width" à 874px. A l'intérieur tu plaçais les autres div avec un "width" à 734px et un "margin-left" de 68px et là FF et IE n'était plus d'accord sur le point de départ des 68px. Apparemment FF l'applique bien à partir de #container mais IE, lui, double la mise !

A+
Modifié par CoingPomme (15 Mar 2006 - 22:35)

Salut Coingpomme !

Je te remercie pour ton implication:

Maintenant; ça marche !

http://www.olivierlivet.com/oli/trophees/site

Sinon, .. pour ceux qui liront ce post dans le futur, la base de mon problème est la "margin-right", en fait IE tient compte de la barre de scroll alors que les autres navigateur n'en tienne pas compte.

Donc ! ne jamais mettre de margin-right, et placez des div container afin de contourner ce problème (ainsi vos bloc en float:right) n'auront pas à prendre de marge à droite.

2eme recommandation, installé un navigateur digne de ce nom, FF ou opéra sur tous les ordi que vous croisez ! je vais lancer une croisade anti IE !