Bug d'un menu sous FireFox![Résolu]

[adri5656]

Bonjour,
j'ai un problème avec mon design, en effet celui-ci est niquel sous Internet Explorer, mais il bug sous FireFox!

En faite, il y a deux "box" qui se "colle" sous FireFox, voici deux screen:
-un tel que le menu apparait sous IE6 (internet explorer 6):
http://www.1001-games.net/bug/normale.png
-un autre tel qu'il apparait sour FireFox:
http://www.1001-games.net/bug/bug.png

Voici l'adresse de mon site (en creation): http://www.1001-games.net

Le code html du menu qui bug:

<div id="leftbar">
<div class="box">
<h2>Navigation</h2>

<ul class="inbox">

<li> <a href="#">accueil</a><a href="#">l'
equipe</a><a href="#">livre d' or</a><a href="#">en savoir plus</a><a href="#">partenaires</a><a href="#">accueil</a><a href="#">l' equipe</a><a href="#">livre d' or</a><a href="#">en
savoir plus</a><a href="#">partenaires</a><a href="#">Jeux video</a><a href="#">Astuces</a><a href="#">entraide</a><a href="#">combats,
concours</a><a href="#">vos preferences</a></li>

<li> </li>
</ul>

</div>

<div class="box">
<div class="inbox">
<h3>Partenaires</h3>

<p> test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>tes<br />

<br />

<img src="img/bulbox.png" alt="decoupe-fr.net" /> </p>

</div>

</div>

Code css:

#leftbar{
margin: 0;
padding: 0 0 0 27px;
float: left;
width: 160px;
text-transform:capitalize;
}
#leftbar .box{
margin: 0 0 12px 0;
padding: 0;
width: 160px;
background: url(img/box.png) repeat-y 0 0;
}
#leftbar .box .inbox{
margin: 0;
padding: 0 0 20px 0;
width: 160px;
list-style: none;
background: url(img/boxfoot.png) no-repeat 0 100%;
}

#leftbar h2{
margin: 0;
padding: 3px 0 0 0;
height: 26px;
font: bold 12px Arial, Helvetica, sans-serif;
text-align:center;
color:#7d4e96;
text-transform:uppercase;
background: url(img/h2side.png) no-repeat 0 0;
}
#leftbar h3{
margin: 0;
padding: 0;
height: 26px;
font: bold 12px Arial, Helvetica, sans-serif;
text-align:center;
color:#7d4e96;
text-transform:uppercase;
background: url(img/h3side.png) no-repeat 0 0;
}
#leftbar ul{
margin: 0;
padding: 0;
list-style: none;
font: 12px Verdana, Arial, Helvetica, sans-serif;
width: 160px;
}
#leftbar ul li {

float:left;
}
#leftbar ul li a{
margin: 0 1px;

padding: 0 0 0 28px;
color: #AAAAAA;
line-height:24px;
text-decoration:none;
display: block;
background: url(img/liside.png) no-repeat 0 0;
width: 160px;

}
#leftbar ul li a:hover{ color: #990000; background: url(img/liside.png) no-repeat 0 -24px; }
#leftbar p{ text-align: center; margin: 5px 20px; font:11px Arial, Helvetica, sans-serif; padding: 20px 0 0 }

Merci d'avance,
Adrien

 

[david96]

Ton server ne répond pas, impossible d'accéder à tes pages ! :?

 

[adri5656]

mince mon hebergeur a dû avoir un problème,
mais la c'est bon c'est reparti!
Merci d'avance pour vos conseils!!

 

[Dan_A]

C'est un bug d'IE qui fait croire que tout va bien.
Ajoute overflow:auto; dans #leftbar ul et #leftbar .box pour entourer les floats.

 

[adri5656]

Oui, je vien de rajouter un overflow:hidden, et la c'est niquel, merci pour votre aide!
@+