Hallo allemaal,
Ik heb een vrij simpel menu in elkaar gezet met behulp van List-O-Matic. Het is een menu waar de achtergrond van kleur veranderd wanneer de muis er overheen gaat. Niets speciaals dus maar FireFox heeft problemen met het weergeven van de border onder het LI element. Ter verduidelijking heb ik een plaatje bijgevoegd. Zoals je kunt zien laat FireFox dus wel een lijn zien onder het tweede element wat ik niet begrijp. Kan iemand mij helpen? Alvast bedankt!
HTML:
Ik heb een vrij simpel menu in elkaar gezet met behulp van List-O-Matic. Het is een menu waar de achtergrond van kleur veranderd wanneer de muis er overheen gaat. Niets speciaals dus maar FireFox heeft problemen met het weergeven van de border onder het LI element. Ter verduidelijking heb ik een plaatje bijgevoegd. Zoals je kunt zien laat FireFox dus wel een lijn zien onder het tweede element wat ik niet begrijp. Kan iemand mij helpen? Alvast bedankt!
HTML:
code:
CSS:1
2
3
4
5
| <div id="navcontainer"><ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li></ul></div> |
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
| #navcontainer {
width: auto;
padding: 0px 0px 0px 0px;
}
#navcontainer ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#navcontainer li {
border-bottom: 1px solid #D6E3FF;
margin: 0px;
}
#navcontainer li a, li a:hover {
border-left: 1px solid #2858C9;
border-right: 1px solid #2858C9;
color: #FFF;
display: block;
padding: 5px 0px 5px 5px;
text-decoration: none;
width: auto;
}
#navcontainer li a {
background-color: #87AFFF;
}
#navcontainer li a:hover {
background-color: #A9C5FF;
} |