Block qui part en live sous Firefox

Hello tout le monde !
Regardez cette page sous IE et sous Firefox:
http://patheticlovers.free.fr/

Sous IE aucun problème, par contre sous Firefox, un cadre est parti en live...

Le cadre en question est une include, cette include ayant comme background l'image que vous voyez partir en live, et en contenu le menu.

Voici le code de l'include:
Code : HTML

        <div id="box_menu">
                <div id="menu">
                          <a href="../pages/news.php" title="" >News</a>
                        - <a href="../pages/fanclub.php" title="" >Fan Club</a>
                        - <a href="../pages/bio.php" title="" >Biographie</a>
                        - <a href="../pages/members.php" title="" >Membres</a>
                        - <a href="../pages/disco.php" title="" >Discographie</a>
                        - <a href="../pages/lyrics.php" title="" >Paroles</a>
                        - <a href="../pages/tour.php" title="" >Tour Info</a>
                        - <a href="../pages/faq.php" title="" >FAQ</a><br />
                          <a href="../pages/lives.php" title="" >Concerts</a>
                        - <a href="../pages/medias.php" title="" >Medias</a>
                        - <a href="../pages/galerie.php" title="" >Galerie</a>
                        - <a href="../pages/forum.php" title="" >Forum</a>
                        - <a href="../pages/events.php" title="" >Evénements</a>
                        - <a href="../pages/links.php" title="" >Liens</a>
                        - <a href="../pages/about.php" title="" >A propos</a>
                        - <a href="../pages/contacts.php" title="" >Contacts</a>
                </div>
        </div>

Il y a donc un div box_menu qui contient l'image de fond, et un div menu qui contient le menu.

Voici le css qui leur sont lié:
Code : CSS

#box_menu
{
padding: 0px;
margin: 0px;
width: 775px;
height: 85px;
background-image: url(../../images/menu/menu-bg.jpg);
color: white;
font-weight:bold;
}

#menu
{
width: 635px;
height: 40px;
margin: 0px;
padding: 0px;
margin-top: 25px;
margin-left: 70px;
text-align: center;
color: black;
}

#menu a
{
   text-align: center;
   text-decoration: none;
   color: white;
}

#menu a:visited
{
   text-decoration: none;
   text-align: center;
}

#menu a:hover
{
   text-decoration: none;
   color: silver;
}

Comme vous pouvez le voir, le #menu est décallé vers la droite et vers le bas. (pour pouvoir centrer le menu comme je veux)
Quand je retire du #menu la partie margin-top: 25px;, l'image de fond du #box_menu revient à sa place! Par contre le menu est collé en haut de ce box... donc ca va pas!

Est-ce normal que le box_menu, qui est pourtant le "contenant" bouge, alors que c'est le "contenu" que je déplace??
Vous avez une idée du problème?


Si vous avez besoin de plus d'info, demandez moi!
Merci.


edit: heu... un truc de nouveau...
Si pour le #box_menu je rajoute:
Code : CSS

border: white;
border-style: solid;

Une belle bordure blanche... elle se colle comme par magie au bloc du dessus et le menu reste bien comme il faut o_O
Regardez ce que ca donne: Screenshot

.... c'est vraiment bizarre.... Si quelqu'un a une belle idée! Merci encore!
Modifié par Ariakan (27 Feb 2006 - 08:34)

je crois que tu as utilisé un <p id="menu"> et non un div le <p> a un margin par default qu'il faut supprimer dans FF

Dans mon css il y avait un

p
{
margin: 0px;
padding: 0px;
}

Je viens de changer mon <p id="menu"> en <div id="menu">, et j'ai remplacé mon css par

div
{
margin: 0px;
padding: 0px;
}

Donc ca ne vient vraiment pas de là
Modifié par Ariakan (27 Feb 2006 - 09:51)