Firefox me fait des siennes...

IE marche à merveille !!!!!!!

Sujet résolu

Anonyme

23 juillet 2006 à 3:31:36

Bonjour!

J'ai un souci avec Firefox.

Dans ma page, j'ai placé le menu (à l'horizontale) entre la bannière et le corps.
Par défaut (dans ie et ff), le bloc menu et bannière ne sont pas colés.
Mais moi comme je doit faire le design qu'on m'impose, il faut qu'ils soient colés !

Alors j'ai rajouté le code ci dessous dans le css de mon menu

margin-top: 0px;

Le résultat marche, mais seulement sous IE, et pas sous FF !
Comment faire?

Et c'est pareil pour le haut de la page et la bannière, car je veux que ma bannière soit collée au haut de la page (pour montrer que ma bannière vient de plus haut et ne comme pas d'un coup)! J'ai fait pareil en rajoutant le même code dans le body et ça ne marche que sur IE.

Merci d'avance à tous de votre aide !

à+

chriskirknielsen

23 juillet 2006 à 3:35:37

Screen, code ?

Anonyme

23 juillet 2006 à 3:46:36

ff: http://img204.imageshack.us/img204/9113/fffr0.jpg
ie: http://img236.imageshack.us/img236/1087/iexj5.jpg

<body>

<div id="en_tete">
<p></p>

</div>

<div id="menu">
<div class="element_menu">
<h2>Menu</h2>
<p><br /><br />
</p>
<ul>
<li><a href="index.php">Acceuil </a></li>
<li><a href="equipe.php"> Notre Equipe </a></li>
<li><a href="forum/index.php"> Le Forum </a></li>
<br /><hr class="menu"/><br />
<li><a href="http://www.siteduzero.com"> Site du Zér0 </a></li>
<li><a href="http://www.google.fr"> Google </a></li>
<li><a href="http://earth.google.fr/"> Google Earth </a></li>
</ul>
</div>

</div>

<div id="corps">

</div>

body {
font-family: Verdana, "Arial Black", Arial, Times, serif;
width: 760px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
background-color: #45495C;
color: black;
}

/* L'en-tête */

#en_tete {
width: 760px;
height: 114px;
margin-left: auto;
margin-top: 0px;
margin-right: auto;
background-image: url("ban.PNG");
background-position:center;
background-repeat: no-repeat;
}

/* Le menu */

#menu {
width: 760px;
vertical-align:top;
}

/* Effet sur le premier menu */

.element_menu {
width: 760px;
background-color: #45495c;
background-position:center, top;
background-image: url("menu.png");
background-repeat: no-repeat;
text-align:center;
margin-left: auto;
margin-right: auto;
}

/* Corps de la page */

#corps {
width: 730px;
height: 550px;
text-align: center;
color: #000000;
font-size:11px;
background-image:url(corps.PNG);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
padding-top: 30px;
padding-right: 10px;
padding-left:10px;
}

/* Effets sur les paragraphes du corps de la page */

#corps p {
height: 30px;
}

Voila j'ai laissé l'essentiel.

okens

23 juillet 2006 à 4:01:03

Je n'ai pas le temp de t'aider (sry)

, mais sache simplement que c'est pas Firefox qui fait des siennes, c'est simplement que tu as fait ton site avec IE, hors tu t'es gouré, c'est IE qui fait des siennes o_O

ps : Ton design est sympas

http://www.encheres-cents.com - http://www.checkmycomposer.com

Anonyme

23 juillet 2006 à 4:11:06

Merci

Je l'ai fait depuis le début avec ff et de temps en temps j'allais voir sur IE pour voir ce qui se passait.

Alors pourquoi, quand je ne met pas

margin-top: 0px;

dans le css du menu, c'est pareil que si je le met ? (sous firefox).

Alors que internet explorer réagit directement !

Erf... besoin d'aide, psk sinon je sais pas comment je vais faire pour mettre mon menu avec firefox :s !

Merci

Bonuit !

Ssam

23 juillet 2006 à 6:31:24

en passant, c'est accUEIl, pas acceuil

Thunderseb

23 juillet 2006 à 9:59:16

essaie en mettant un margin-top négatif pour firefox (utilise les !important). mets margin-bottom:0px; pour #en_tete. c'est peut-être ça.

Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - sdlm.be - Horus.aero

Anonyme

23 juillet 2006 à 12:24:34

Ok jvais essayer merci beaucoup Thunderseb

Edit: Ca marche pas

Bilbou

23 juillet 2006 à 12:29:58

Chu !

Le code ne semble pas coller totalement avec l'image : je vois pas le <h2>Menu</h2> dans l'image !

Mais pour moi, c'est un problème de marges avec les paragraphes, les ul ou les li !

Essaie de jouer sur les margin-top et bottom de ces éléments !

EDIT : Je pensais à un truc tout à coup...
Essaie donc d'appliquer un 1px solid black sur ton div menu, juste pour voir.
Est-ce que, mis à part la bordure noire, l'image de fond apparaît correctement avec FF une fois cette modification effectuée ?

Anonyme

23 juillet 2006 à 13:00:54

Merci je vais essayer ça.
En fait c'est un margin d'environ 15px qui sépare le menu et la bannière, je sais pas d'où il sort

Tangui

23 juillet 2006 à 13:52:42

Slt,

les listes ont par défaut du padding et/ou du margin. Seulement, c'est pas la même chose sur les différents navigateurs : il me semble que ie rajoute du margin et FF rajoute du padding (mais c'est peut être l'inverse).

Le mieux dans ce cas est supprimer les marges par défaut des navigateurs.

a+

Anonyme

23 juillet 2006 à 16:54:49

Citation

Vous n'avez pas le droit de voir ce mini-tuto.

Vous allez être redirigé dans 5 secondes

Bilbou

23 juillet 2006 à 17:42:02

Avec le border ça donne quoi alors ? :-°

Anonyme

24 juillet 2006 à 19:52:10

dsl du retard...

Citation : Bilbou

EDIT : Je pensais à un truc tout à coup...
Essaie donc d'appliquer un 1px solid black sur ton div menu, juste pour voir.
Est-ce que, mis à part la bordure noire, l'image de fond apparaît correctement avec FF une fois cette modification effectuée ?

Voila ce que ça donne avec des bordures

http://img233.imageshack.us/img233/4286/bordertk9.jpg

J'vais voir ce que ça donne en modifiant les css des p, li etc

ScaveN

24 juillet 2006 à 20:02:17

Tu as essayé :

padding:0px; sur <ul> ou sur <li> je ne sais plus.

Parce que vu ta bordure, ce sont des marges INTERIEURES. Ca vient du fait que IE met une marge exterieure sur les liste alors que firefox met une marge intérieure.

Anonyme

24 juillet 2006 à 20:11:37

J'ai trouvéééé!!!!!!!
Enfin plutot:
Bibou a trouvéééééééééééééé !!

Merci à tous

Edit: Scaven c'était presque ça, ça aurait petètre aussi pu marcher je pense. Mais maintenant que ça marche je touche plus

Voila le petit code qui était supra important ^^:

.element_menu ul {
display: inline;
}

Tout ça psk j'ai essayé de mettre mon menu en une ligne !

Merci mec
à+