Bug sous FireFox! mais pas sous IE!
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:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <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>
</div> |
Code css:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
| #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
