CSS menu probleem IE6 [opgelost]
Probleempje in IE6 only met een horizontaal menu (voor Wordpress). Ik zie het niet meer.
Bij het laden van de pagina wordt het menu opgebouwd, maar in de laatste split-second verdwijnt het geheel.
Iemand?
Er zit een PNG-file op de achtergrond met deze hack.
Deze werkt in de rest van de pagina in ieder geval goed.
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
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
#nav {
list-style: none;
margin: 0px;
position: absolute;
right: 0px;
top:177px;
background: url(images/nav2/bg_wouter.png);
width:635px;
height:42px;
}
#nav li {
float: right;
text-align:right;
margin-right:20px;
padding-top:6px;
}
/* Hieronder de horinzontale menu items 1 = home 2= nieuws 3= oefenen 4 = links 5 = contact */
#nav .page_item1 a{
font-size:0.00001px;
background-image:url(images/nav2/home_0.jpg);
width:58px;
height:28px;
display: block;
}
#nav .page_item1 a:hover {
color: #000000;
background-image:url(images/nav2/home_1.jpg);
}
list-style: none;
margin: 0px;
position: absolute;
right: 0px;
top:177px;
background: url(images/nav2/bg_wouter.png);
width:635px;
height:42px;
}
#nav li {
float: right;
text-align:right;
margin-right:20px;
padding-top:6px;
}
/* Hieronder de horinzontale menu items 1 = home 2= nieuws 3= oefenen 4 = links 5 = contact */
#nav .page_item1 a{
font-size:0.00001px;
background-image:url(images/nav2/home_0.jpg);
width:58px;
height:28px;
display: block;
}
#nav .page_item1 a:hover {
color: #000000;
background-image:url(images/nav2/home_1.jpg);
}
De laatste 2 rules dan 5 keer voor verschillende namen (oefenen, nieuws etc)
De html:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<ul id="nav">
<li class="page_item5"><a href="<?php echo get_option('siteurl').'/contact'; ?>" title="Contact"> </a></li>
<li class="page_item4"><a href="<?php echo get_option('siteurl').'/links'; ?>" title="Links"> </a></li>
<li class="page_item3"><a href="<?php echo get_option('siteurl').'/oefenen'; ?>" title="Oefenen"> </a></li>
<li class="page_item2"><a href="<?php echo get_option('siteurl').'/nieuws/'; ?>" title="Nieuws"> </a></li>
<li class="page_item1"><a href="<?php echo get_option('siteurl').'/'; ?>" title="Home"> </a></li>
</ul>
<li class="page_item5"><a href="<?php echo get_option('siteurl').'/contact'; ?>" title="Contact"> </a></li>
<li class="page_item4"><a href="<?php echo get_option('siteurl').'/links'; ?>" title="Links"> </a></li>
<li class="page_item3"><a href="<?php echo get_option('siteurl').'/oefenen'; ?>" title="Oefenen"> </a></li>
<li class="page_item2"><a href="<?php echo get_option('siteurl').'/nieuws/'; ?>" title="Nieuws"> </a></li>
<li class="page_item1"><a href="<?php echo get_option('siteurl').'/'; ?>" title="Home"> </a></li>
</ul>
Voorbeeld hier
(Mod-rewrite staat niet aan op de testserver, dus links werken niet goed...)
Ik hoor het graag!
Wouter
Gewijzigd op 01/01/1970 01:00:00 door Wouter Tinbergen
geef je balk z-index:1; en je buttons z-index: 2; mee, kijken wat die doet.
zelf gebruik ik altijd deze: http://homepage.ntlworld.com/bobosola nadeel hier is dat je je image in je broncode moet linken met width en height.
ik kijk even naar je link.
Wat gebeurt er als je de png vervangt door een jpg of gif? Verder zie ik nog dat het menu (#nav) 'text-align: left' erft van #container, en daar doet IE soms rare dingen mee (i.c. laat het ook werken op niet-tekst).
Tot slot is er nog meer aan de hand met de IE-rendering: de onderste div staat helemaal los onderaan, en daaronder weer een loze ruimte. In FF sluit alles keurig aan.
- Frank
Code (php)
1
li {display: inline;}
De onderste div zag ik ook. is een box probleem denk ik.
de inline tip verwacht ik veel van.
Bizar is het wel kort verschijnen en vervolgens verdwijnen.
Jullie horen het! Dank.
Dank voor de suggesties.