Mijn nieuwe homepage is gebouwd in xhtml 1.0 strict en css. Ik ben nu al te veel uren kwijt geweest aan het menu, maar lijk nu dicht bij de oplossing te zijn. De website is te vinden op http://wekko.homedns.org/bvr/ . Het werkt goed in IE7 en in FireFox 2.0. In IE6 wil het nog steeds niet werken. Het probleem is dat het laatste item ('contact') in het menu een margin-right van 22 pixels meegekregen heeft in de stylesheet. Daarom past het niet meer. Dit heb ik voor alle items gedaan zodat ze niet tegen elkaar aan staan. De laatste moet dit dus alleen niet krijgen.
Om dit op te lossen staat er in de html <li style="margin-right: -22px">. IE6 pakt deze niet en houdt gewoon die 22px nog steeds aan. Ik vind het sowieso raar dat voor FF en IE7 margin-right negatief moet zijn en niet 0, maar anders werkt het ook niet goed. De code waar het om gaat:
html:
CSS:
Iemand enig idee welke IE6 bug dit nu weer veroorzaakt?
Om dit op te lossen staat er in de html <li style="margin-right: -22px">. IE6 pakt deze niet en houdt gewoon die 22px nog steeds aan. Ik vind het sowieso raar dat voor FF en IE7 margin-right negatief moet zijn en niet 0, maar anders werkt het ook niet goed. De code waar het om gaat:
html:
code:
(deel van de dummy content weggelaten)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
| <!-- main menu -->
<div id="menu">
<ul id="nav">
<li><a href="/diensten/" style="background: url(i/b/diensten_bw.jpg); background-repeat: no-repeat;" onmouseover="toggleMenu('diensten')" onmouseout="toggleMenu('diensten')" id="diensten">Diensten</a>
<ul onmouseover="toggleMenu('diensten')" onmouseout="toggleMenu('diensten')">
<li><a href="/diensten/consultancy">» Consultancy</a></li>
<li><a href="/diensten/webdesign">» Webdesign</a></li>
</ul>
</li>
<li><a href="/webapplicaties/" style="background: url(i/b/webapplicaties_bw.jpg); background-repeat: no-repeat;" onmouseover="toggleMenu('webapplicaties')" onmouseout="toggleMenu('webapplicaties')" id="webapplicaties">Webapplicaties</a>
<ul onmouseover="toggleMenu('webapplicaties')" onmouseout="toggleMenu('webapplicaties')">
<li><a href="/richinternetapplications/onderhoudbaarheid">» Onderhoudbaarheid</a></li>
<li><a href="/richinternetapplications/zoekmachineoptimalisatie">» Zoekmachines</a></li>
</ul>
</li>
<li><a href="/portfolio/" style="background: url(i/b/portfolio_bw.jpg); background-repeat: no-repeat;" onmouseover="toggleMenu('portfolio')" onmouseout="toggleMenu('portfolio')" id="portfolio">Portfolio</a>
<ul onmouseover="toggleMenu('portfolio')" onmouseout="toggleMenu('portfolio')">
<li><a href="/portfolio/websites">» Websites</a></li>
</ul>
</li>
<li><a href="/projecten/" style="background: url(i/b/projecten_bw.jpg); background-repeat: no-repeat;" onmouseover="toggleMenu('projecten')" onmouseout="toggleMenu('projecten')" id="projecten">Projecten</a>
<ul onmouseover="toggleMenu('projecten')" onmouseout="toggleMenu('projecten')">
<li><a href="/projecten/webshop">» e-Commerce</a></li>
</ul>
</li>
<li style="margin-right: -22px;"><a href="/contact/" style="background: url(i/b/contact_bw.jpg); background-repeat: no-repeat;" onmouseover="toggleMenu('contact')" onmouseout="toggleMenu('contact')" id="contact">Contact</a></li>
</ul>
</div> |
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
67
68
69
| /* main menu */
#menu {
width: 898px;
height: 88px;
margin-left: 20px;
}
#menu ul {
margin: 0;
margin-left: 19px;
padding: 0;
list-style: none;
width: 898px;
}
#menu ul li {
display: block;
list-style: none;
position: relative;
float: left;
margin-left: 0px;
margin-right: 22px;
}
#menu ul li:hover ul, #menu ul li.over ul { display: block; }
#menu ul li a {
display: block;
width: 154px;
height: 21px;
background-repeat: no-repeat;
padding-top: 70px;
padding-left: 8px;
text-decoration: none;
color: #000;
margin: 0;
}
#menu ul li ul {
top: 90px;
left: -19px;
width: 150px;
position: absolute;
display: none;
border:1px solid #1393bf;
opacity: .90; /* CSS3, Mozilla 1.7+, Safari 1.2+, FireFox 0.9+, Opera 9, IE 7.0beta, Konqueror? */
-moz-opacity: 0.90; /* Mozilla < 1.7 (2003) / Firefox 0.8 (2004) */
-khtml-opacity: 0.90; /* Safari 1.1, Konqueror 3.1 (support removed later) */
filter: alpha(opacity=90); /* Internet Explorer 5.5, 6 */
background-color: #fff;
padding: 5px;
}
#menu ul li ul li {
height: auto;
width: auto;
margin: 0;
padding: 0;
clear: both;
}
#menu ul li ul li a {
height: auto;
width: 140px;
display: block;
text-decoration: none;
color: #505050;
padding: 5px;
margin: 0;
}
#menu ul li ul li a:hover {
background-color: #b11900;
color: #fff;
} |
Iemand enig idee welke IE6 bug dit nu weer veroorzaakt?
.
. In ieder geval komt het contact menu dus op de volgende regel te staan in IE6.