Navigatie knoppen in IE6 wordt niet getoond?
Screenshots in verschillende browsers:
http://j3rn.org/phphulp/nav.jpg
HTML Markup:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div class="navcontainer">
<ul class="navlist">
<li class="active"><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
<ul class="navlist">
<li class="active"><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
CSS code
Code (php)
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
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
.navlist {
margin:0;
padding:0;
font-size:1.5em;
line-height:39px;
}
.navlist li {
display: inline;
list-style-type: none;
}
.navlist li a {
text-decoration:none;
padding-bottom:10px;
padding-top:8px;
padding-left:10px;
padding-right:10px;
}
.navlist li a:hover {
background-image:url(../img/navhover.jpg);
background-repeat:repeat-x;
}
.navlist li.active a {
background-image:url(../img/navselected.jpg);
background-repeat:repeat-x;
color:#FFFFFF;
}
.navlist li.active a:hover {
background-image:url(../img/navselected.jpg);
background-repeat:repeat-x;
color:#000000;
}
margin:0;
padding:0;
font-size:1.5em;
line-height:39px;
}
.navlist li {
display: inline;
list-style-type: none;
}
.navlist li a {
text-decoration:none;
padding-bottom:10px;
padding-top:8px;
padding-left:10px;
padding-right:10px;
}
.navlist li a:hover {
background-image:url(../img/navhover.jpg);
background-repeat:repeat-x;
}
.navlist li.active a {
background-image:url(../img/navselected.jpg);
background-repeat:repeat-x;
color:#FFFFFF;
}
.navlist li.active a:hover {
background-image:url(../img/navselected.jpg);
background-repeat:repeat-x;
color:#000000;
}
Gewijzigd op 01/01/1970 01:00:00 door Jeroen G
@TS heb je een online voorbeeld? ik heb het gevoel dat je een tag niet afsluit voor het menu die je wel had moeten afsluiten.
Ik gebruik de onderstaande code om een lege regel ná de container div te verbergen. Dit werkt dus niet in IE6.
Code (php)
1
overflow: hidden;
Gewijzigd op 01/01/1970 01:00:00 door Jeroen G
Terence schreef op 23.07.2008 13:27:
@Emmanuel: dat is onzin wat je nu zegt
...
...
Voor zover ik weet werkt :hover enkel met a:hover, met IE6
Kijk eens naar dit simpel voorbeeld:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 TRADITIONAL //NL">
<html>
<head>
<style>
.div_voorbeeld
{
border: 1px solid #333333;
width: 50px;
height: 50px;
}
.div_voorbeeld:hover
{
background-color: #666666;
}
</style>
</head>
<body>
<div class="div_voorbeeld"></div>
</body>
</html>
<html>
<head>
<style>
.div_voorbeeld
{
border: 1px solid #333333;
width: 50px;
height: 50px;
}
.div_voorbeeld:hover
{
background-color: #666666;
}
</style>
</head>
<body>
<div class="div_voorbeeld"></div>
</body>
</html>
IE6 negeert deze hover, Safari, Opera en FF doen wel wat ik wil. Ondertussen mek ik wel dat het met IE8 beta wel lukt.
Iemand nog een idee voor de overflow:hidden?
Hier is een strategie voor je:
geef de li's de actieve achtergrond
geef de a's de nonactieve achtergrond
op a:hover zet je de achtergrond van de a's op none
als je een actieve pagina anders wilt weergeven, doe dat dan met strong in plaats van a
Jan Koehoorn schreef op 23.07.2008 19:03:
geef de li's de actieve achtergrond
geef de a's de nonactieve achtergrond
geef de a's de nonactieve achtergrond
Goeie tip Jan