Block qui se décale sous Firefox!!

Marsh Posté le 27-02-2006 à 09:22:06

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

Code :

<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

Code :

#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. [smile]

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

Code :

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!

Reply

Marsh Posté le 27-02-2006 à 09:22:06

Reply

Marsh Posté le 27-02-2006 à 09:38:38

Je suis presque sûr que ça vient du modèle "boîte" de IE vs W3C. Y'en a un qui inclus les marges dans la boîte et pas l'autre.

Reply

Marsh Posté le 27-02-2006 à 10:22:09

"Je suis presque sûr que ça vient du modèle "boîte" de IE vs W3C"

heeeeeeeeu... :??: hein?
C'est à dire?

Reply

Marsh Posté le 27-02-2006 à 10:42:29

Si tu es amené à faire pas mal de css, je t'invite à effectuer une petite recherche sur "modèle boîte". Tu vas découvrir l'emmerdement que c'est.
Un bon site : www.alsacreations.com (mais j'ai vu que t'avais déposé dessus le même topic)
Sinon : http://openweb.eu.org/articles/dimensions_boites_css/

Reply

Marsh Posté le 27-02-2006 à 10:51:37

ariakan je confirme,
j'ai eu le meme problème, j'ai du faire en sorte qu'une apli tourne aussi bien sous firefox et sous IE, ben en faite
il faut que tu mette une dimension de ta div quand tu la declare et tu verra ca resous beaucoup de problème

Reply

Block qui se décale sous Firefox!!

Sujets relatifs:

Leave a Replay