Oke ik zal het zo technisch mogelijk uit te leggen.
Klant zeurt om menu wat niet werkt in IE7… heb ik een script gebruikt hiervoor… werkt hij weer niet in IE6.
De kuur van beide browsers was simpel: of het is bij 6 of het is bij 7: het menu gaat als je over de rollover ga schiet hij naar rechts waardoor hij buiten het scherm komt ipv eronder.
Dit is de bedoeling in beide IE’s:
[img:96053c6910]http://www.dreamix-design.com/Afbeelding%201.png[/img:96053c6910]
![http://www.dreamix-design.com/Afbeelding%201.png[/img:96053c6910]](http://www.dreamix-design.com/Afbeelding%201.png%5B/img:96053c6910%5D){kind=link}
Basis code:
Er is een div waar het menu in moet draaien met de volgende css properties:
[code:1:96053c6910]#locaties { position:absolute;
background-image:url(…/images/locatiebg.png);
background-repeat: no-repeat;
width: 240px;
height: 40px;
left: 675px;
top: 0px;
padding: 0px 0px 0px 12px;
text-align: left;
}[/code:1:96053c6910]
Nu komt het menu zelf:
[code:1:96053c6910]
.locatie {
z-index:100;
margin:0px 0px 0px 0px;
padding: 0px;
}
/* remove all the bullets, borders and padding from the default list styling /
.locatie ul {
padding:0px;
margin:0px;
list-style-type:none;
}
.locatie ul ul {
margin:0px;
padding: 0px 0px 0px 10px;
}
/ float the list to make it horizontal and a relative positon so that you can control the dropdown locatie positon /
.locatie li {
float:left;
margin:0px;
padding: 0px;
}
/ style the links for the top level /
.locatie a, .locatie a:visited {
display:block;
font-size:11px;
text-decoration:none;
color:#fff;
width:216px;
height:10px;
border-width:1px 1px 0 0;
background:#758279;
padding-left:0px;
line-height:29px;
text-align: left;
}
/ a hack so that IE5.5 faulty box model is corrected */
- html .locatie a, * html .locatie a:visited {
width:139px;
}
/* style the second level background */
.locatie ul ul a.drop, .locatie ul ul a.drop:visited {
background:#d4d8bd;
}
/* style the second level hover /
.locatie ul ul a.drop:hover{
background:#FFFFFF;
}
.locatie ul ul :hover > a.drop {
background:#FFFFFF;
}
/ style the third level background /
.locatie ul ul ul a, .locatie ul ul ul a:visited {
background:#FFFFFF;
}
/ style the third level hover */
.locatie ul ul ul a:hover {
background:#FFFFFF;
}
/* hide the sub levels and give them a positon absolute so that they take up no room /
.locatie ul ul {
visibility:hidden;
position:absolute;
height:0;
top:35px;
left:6px;
;
}
/ another hack for IE5.5 */
- html .locatie ul ul {
top:30px;
top:31px;
}
/* position the third level flyout locatie /
.locatie ul ul ul{
left:150px;
top:0;
width:150px;
}
/ position the third level flyout locatie for a left flyout */
.locatie ul ul ul.left {
left:-150px;
}
/* style the table so that it takes no ppart in the layout - required for IE to work */
.locatie table {position:absolute; top:0; left:0;}
/* style the second level links /
.locatie ul ul a, .locatie ul ul a:visited {
background:#FFFFFF;
border-top:1px solid #CCCCCC;
color:#000;
height:auto;
line-height:1em;
padding:5px 10px 5px 0px;
width:129px
/ yet another hack for IE5.5 */
}
- html .locatie ul ul a{
width:150px;
width:129px;
}
/* style the top level hover */
.locatie a:hover, .locatie ul ul a:hover{
color:#fff;
background:#949e7c;
}
.locatie :hover > a, .locatie ul ul :hover > a {
color:#fff;
background:#949e7c;
}
/* make the second level visible when hover on first level list OR link /
.locatie ul li:hover ul,
.locatie ul a:hover ul{
visibility:visible;
}
/ keep the third level hidden when you hover on first level list OR link */
.locatie ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.locatie ul :hover ul :hover ul{
visibility:visible;
}
[/code:1:96053c6910]
Heeft iemand een idee hoe ik dus het menu netjes recht in [b:96053c6910] beide[/b:96053c6910] browsers kan krijgen?
Alvast bedankt!