Avatar billede torotune Nybegynder
31. marts 2008 - 10:32 Der er 3 kommentarer og
1 løsning

Menu klasker sammen i IE6

Hej,

Jeg sidder og roder horisontal menu med dropdowns i op til 3 niveauer. Det bygger på noget JS, hvor menupunkterne er databundne via noget ASP i nogle <li></li> elementer som så er stylet med CSS.

Den virker fint IE 7 og Firefox, men kom pludselig til at se den på en ældre maskine med IE6 - og her klasker den helt sammen, så alle menupunkter der skulle komme efter hinanden ud af x-aksen nu ligger oveni hinanden.

Jeg går ud fra at CSS'en måske bruger nogle elementer der ikke er supporteret i IE 6. Er der nogen der kan spotte nogle elementer i CSS'en som måske kan være med til at ødelægge det?

<style type="text/css">
html,body {
font-family:verdana, arial, helvetica, sans-serif;
color:#999999;
}

.wrapper {
width:100%;
margin:0px auto 0 auto;
text-align:left;
}

/* style the outer div to give it width */
.menu {
width:100%;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
width:120px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:120px;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:10px;
text-decoration:none;
color:#999999;
width:120px;
height:18px;
border:0px solid #fff;
border-width:0px 0px 0 0;
padding-left:0px;
line-height:18px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:120px;
w\idth:60px;
}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#FFFFFF;
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#FFFFFF;
}
.menu ul ul :hover > a.drop {
background:#FFFFFF;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#FFFFFF;
}
/* style the third level hover */
.menu ul ul ul a:hover {
background:#CCCCCC;
}
.menu ul ul ul :hover > a {
background:#CCCCCC;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:18px;
left:0;
width:80px;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:18px;
t\op:18px;
}

/* position the third level flyout menu */
.menu ul ul ul{
left:210px;
top:0;
width:210px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-80px;
}

/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#FFFFFF;
color:#999999;
height:auto;
line-height:1em;
padding:5px 10px;
width:210px

/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:100px;
w\idth:60px;
}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#999999;
background:#ffffff;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#949e7c;
}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
}
</style>
<div id="wrapper">
<div id="info">
<div class="menu">

'''kode der genererer menuen ud af list-elementer

</div>
</div>
Avatar billede olebole Juniormester
31. marts 2008 - 12:57 #1
<ole>

Prøv at lægge et link til siden

/mvh
</bole>
Avatar billede torotune Nybegynder
31. marts 2008 - 15:16 #2
Hej Ole - du kan se et eksempel her: http://www.ferguson.dk/1/test_menu.asp

Hvis du har mulighed for at se den i IE6, kan man se hvordan hele menuen bare ligger i en stak :-/
Avatar billede torotune Nybegynder
01. april 2008 - 08:54 #3
Mon det kan være noget med doctype?
Avatar billede torotune Nybegynder
03. april 2008 - 09:56 #4
Lukker igen. Smed menuen ud.. Det var en om'er!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester