[Résolu] Problème de positionnement d'un div (IE vs FF)

Bonjour,

Je tente désespéremment de fixer le positionnement d'un div dans FireFox et IE. Firefox semble prendre le paramètre margin-top de mon div et affecte ainsi le positionnement de mon conteneur vers le bas même si je spécifie un margin-top : 0px à balise body, ce qui ne se produit pas dans IE. Mon texte se retrouve donc mal positionné dans firefox.

Bref, l'affichage dans IE est ok et dans firefox une marge en haut de page que je ne désire pas apparait. Vous pouvez visualiser à cette adresse : http://m3multimedia.net

Voici mon code :

la page :

<div id="conteneur">
  <div id="contenu1">
    <p class="titres">Lorem ipsum</p>
    <p class="texte">Le texte</p>
  </div>
</div>

le css :
/* CSS Document */
body{
background-color:#498b1e;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
margin-right: 0px;
}
#conteneur{
background-image:url(../images/bg.jpg);
background-repeat:no-repeat;
margin-top: 0px;
margin-left: auto; 
margin-right: auto;
width: 760px;
height: 570px;

}
#contenu1{
margin-top: 70px;
margin-left: 220px;
width: 480px;
height: 430px;
overflow: auto;
}
.titres{
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 40px;
color:#FFFFFF;
margin-left: 15px;
}
.texte{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:small;
color:#FFFFFF;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
text-align:justify
}

Merci beaucoup pour votre aide
Modifié par magoo33 (13 Jul 2006 - 15:49)

Bonjour magoo33 et bienvenue parmi nous,


Je te remercie par avance de bien vouloir respecter l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).
Il est possible d'éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.

Bonne continuation
Modifié par Vero (13 Jul 2006 - 01:05)

Sur mon PC, ce n'est pas ton texte qui mal positionné : il se positionne exactement de la même façon sur les deux navigateurs. C'est ton background qui bouge.
Curieusement, FireFox semble affecter au conteneur le margin-top que tu définis dans le contenu. Du coup, l'image de background définie dans le conteneur descend et le bord de ton cadre vient frôler le haut de bloc texte.

J'ai obtenu un meilleur résultat en jouant sur l'attribut "top" plutôt que sur "margin-top" :

/* CSS Document */
body{
background-color:#498b1e;
margin: 0px;
}
#conteneur{
background-image:url(../images/bg.jpg);
background-repeat:no-repeat;
margin-left: auto; 
margin-right: auto;
width: 760px;
height: 570px;

}
#contenu1{
position: absolute;
top: 70px;
margin-left: 220px;
width: 480px;
height: 430px;
overflow: auto;
}
.titres{
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 40px;
color:#FFFFFF;
margin-left: 15px;
}
.texte{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:small;
color:#FFFFFF;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
text-align:justify
}

Modifié par zapman (13 Jul 2006 - 04:14)

Merci beaucoup zapman, tu as trouvé la solution! Le positionnement est ok avec les paramètres que tu as spécifié. Je t'en dois une .

Je suis ravie que ce forum t'ai apporté une solution !

Cependant, j'aurais apprécié que tu tiennes compte de mon post précédent, à savoir rédiger correctement tes messages en encadrant ton code par un balisage approprié.


Mais il existe une autre règle sur ce forum, l'ajout d'un petit
résolu afin d'optimiser la recherche et la gestion des questions en cours.

Je reste persuadée que cette nouvelle intervention aura plus de succès que la précédente ...

Je te soutiens vero, ca doit pas toujours être facile de répéter la même chose sans arrêt...

zapman a écrit :
Curieusement, FireFox semble affecter au conteneur le margin-top que tu définis dans le contenu.

Bonjour,

Il s'agit d'un phénomène normal de fusion des marges qu'on peut éviter de différentes manières.
Modifié par Alan (13 Jul 2006 - 09:49)

Salut Véro,

tu comprendras sûrement que je suis nouveau sur le forum. J'ai fais les lectures que tu m'as recommandées. Maintenant il se peut que quelques règles m'échappent, jamais le manque de respect et la politesse. Je me corrigerai chaque fois que c'est possible. Merci.

Bonjour à tous,
J'ai eu le même problème avec deux éléments de type blocs imbriqués. Les marges de ces deux éléments ont fusionnés, ce qui fait que quand j'appliquais un margin-top à l'élément contenu, c'est le conteneur qui descendait.
J'ai essayé la manière de zapman (top: 2px;), citée plus haut, mais sans succès.
Suivant les conseils d'Alan (merci !) j'ai fait des recherches sur la fusion des marges css. En effet, plusieurs techniques existent pour contourner le problème , mais celle qui a marché le mieux pour moi est de définir un overflow sur le conteneur ! (overflow:hidden;) et hop plus de marges fusionnées !
Voilà, en espèrant avoir aidé quelqun...