Décalage sous Firefox d'une boite

Mais pas dans IE...

26 février 2006 à 23:48:41

Hello!
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:

<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é:

#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:

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

.... c'est vraiment bizarre.... Si quelqu'un a une belle idée! Merci encore!

ratdecav

27 février 2006 à 0:30:40

Salut, tu code curieusement o_O

. Dans le code source de ton site, tu fait 3 link, alors que le premier suffit(dans le head).
Enlève surtout celui entre tes deux div ( "en_tete" et "box_menu").
++

Ariakan

27 février 2006 à 7:30:30

Hello!
Tu ne précises pas de quoi tu parles, mais je pense qu'il sagit du liens vers la feuille de style css?
En fait, c'est parce que je fais l'appelle dans chaque include (les includes sont http://patheticlovers.free.fr/html/head/head-fr.php et http://patheticlovers.free.fr/html/menu/menu-fr.php )pour pouvoir avoir un apercu de ce que je fais sous dreamweaver et sous un navigateur.

Là je viens de les enlever, et tu verras: ca ne change rien...

Une idée de ce qui ne vas pas?
Il y a un ordre que je n'ai pas respecté dans mon css?

regardez ce que ca donne quand je mets un cadre blanc (sous FF)
Avec un cadre

ratdecav

27 février 2006 à 11:17:14

Salut, essaie ça :

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

j'ai testé ça colle

(au propre comme au figuré), c'est ici !!
++

Ariakan

27 février 2006 à 13:49:29

J'avais pensé essayer de passer par une position:relative; pour le #menu... mais ton code marche nickel!!
Un grand grand merci à toi!!