[résolu] Problème de float avec IE

Bonjour tout le monde,

je suis en train de réaliser la version 2 d'un de mes sites, sur un nouvel hébergeur et avec un nouveau design, tout est prêt pour que je passe officiellement sur la nouvelle version malheureusement un problème dérangeant m'en empêche et c'est pourquoi je fais appelle à votre aide.

Voilà le problème, j'utilise souvent les floats sur mes images dans les articles du site et aussi sur la page d'accueil pour faire une présentation sympa. Jusqu'à aujourd'hui je n'ai jamais eu de problème sur ma première version, ni sur mes autres sites, mais sur celle-ci, ie ne gère pas bien mes floats. Je ne sais pas trop comment l'expliquer mais on dirait que l'image arrive à bien se placer à droite ou à gauche d'un seul paragraphe, puis tout le texte qui suit se met en dessous.
Je ne sais pas si je suis très claire , alors voici l'adresse du site, vous pourrez directement voir le problème sur la page d'accueil.

J'ai déjà ajuster quelques petites différence entre firefox et ie, grâce à une feuille de style supplémentaire pour ie, j'ai d'abord pensé que le problème venait de là, mais en l'enlevant, le problème était toujours le même.

J'ai essayé de localiser le problème mais rien à faire je ne trouve pas la solution, c'est pourquoi je fais appelle aux membres de ce forum pour m'aider. Dans le cas où je ne trouve pas de solution, je pense ne pas faire apparaitre les images en floats sous ie avec un display: none, mais bon c'est pas une solution enviable, vu que je m'en sers sur de nombreuses pages.

J'espère que vous pourrez m'aider, et si trouvez la solution je vous en serais très reconnaissante.

PS: J'ai appris le css et l'html, un peu sur le tas, je code donc un peu comme un cochon , mes pages doivent donc comporter pas mal d'erreur n'y faite pas très attention.
Modifié par Pioupiou (31 Aug 2007 - 23:11)

Coucou

plusieurs pbs sur ta page :

- l'utilisation du png transparent pose des pbs sur ie. Soit tu le remplaces par du gif ou du jpg, soit tu rajoutes un bout de code (je te laisse chercher) pour que ça passe.

- id="map" : sur ie, un bug fait que si tu met un float: left, ça double la valeur de ton margin, d'où ton décalage à droite. va faaloir jouer avec les paddings

- Pour le pb du texte qui se met au dessus, c'est cette css qui pose pb :

#contenu p {
margin:auto auto 10px;
text-indent:5px;
width:700px;

enleve width:700px et ça résoud le pb.

Je te donne un conseil : pendant le dev de tes pages, vérifie régulièrement l'affichage sur les deux navigateurs pour pouvoir déceler le plus rapidement les pbs.

Bon courage
Modifié par buh31 (31 Aug 2007 - 13:30)

Salut,

Enlève aussi le width à tes div dans le code...

			<div style="width: 680px;/* ceux là */
                  height: 118px;
                  margin: auto;
                  padding: 10px;
                  padding-top: 0px;
                  border-bottom: 1px #f0f0f0 solid;">

Merci à tous les deux ça marche niquel, je suis encore étonnée que seul le width provoquait ça...

buh31, je suivrais tes conseils, et pour les png j'avais prévu d'utiliser un peu de code