Avatar billede natsprinter Nybegynder
12. juli 2007 - 11:49 Der er 1 kommentar og
1 løsning

IE7 driller, mens dropDown i ALLE andre browsere spiller

Jeg vil lige høre om du tilfældig er stødt på et problem som jeg har med IE7 på dette site - som jeg er ved at udvikle:

http://nnmarkedsdata.web17.dandomain.dk/

DropDown virker fint - også i IE7 lige indtil du trykker på et af punkterne ex. Erhvervsdata. Herefter forsvinder menuerne ikke igen.

Den del af mit CSS som har med menuen at gøre, ser således ud:

/* Regler for placering af menubar */
#menu{
font-family:Verdana, Arial, Helvetica, sans-serif;
    height:20px;
    width:600px;
    left:156px;
    top:90px;
    position: relative;
    z-index:99;
}

/* Regler for de forskellige niveauer i listen */

#nav, #nav ul { /* Regler for hele listen */
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 14px;
}

#nav a {
    display: block;
    width: auto;
    height:18px;
    text-decoration:none;
    font-size:10px;
    color:#000000;
    padding-left:2px;
    font-weight:bold;
    padding-top:3px;
    z-index:99;
}

a.trekant{
    background-image:url("../grafik/trekant.gif");
    background-repeat:no-repeat;
}

a.trekant:hover{
    background-image:url("../grafik/trekant2.gif");
    background-repeat:no-repeat;
}

/* Sørg for at der ikke er trekanter i tekstareas */
#retTekst a{
background-image:none;
height:12px;
}

#retTekst a:hover{
background-image:none;
}


#nav li { /* Alle <li> elementer */
    float: left;
    width: 120px; /* Bredde skal med for at kunne ses i Opera */
}

#nav li ul { /* Niveau 2 liste */
    position: absolute;
    background: white;
    width: 120px;
    left: -2000px; /* Bruger lang venstramargin for at kunne læses i skærmlæsere */
}

#nav li ul a{
background-color:#FFFFFF;
font-weight:bold;
border:1px solid #CC0000;
}

#nav li ul a:hover{
color:#FFFFFF;
background-color:#CC0000;
}

#nav li ul ul { /* Placering af undermenuer i forhold til dropdowns 2. niveau */
    margin: -22px 0 0 120px;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
    left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
}


Den tilhørende HTML kode ser således ud:


<div id="menu">
<ul id="nav">
<li style="width:135px;"><a href="index.asp" class="trekant" style="padding-left:10px;">Om NN&nbsp;Markedsdata</a>
                <ul>
                    <li><a href="info.asp?id=21">Profil</a> </li>
                    <li><a href="info.asp?id=22">Historie</a></li>
                    <li><a href="info.asp?id=67">Job</a></li>
                    <li><a href="info.asp?id=83">Medarbejdere</a></li>
                    <li><a href="nyhed_dk.asp?id=89&formID=1">Nyhedsbrev</a></li>
                    <li><a href="info.asp?id=23">Hotline</a></li>
                    <li><a href="kontakt_dk.asp?id=107">Kontakt</a></li>
                </ul>
</li>

<li style="width:88px;"><a href="info.asp?id=30" class="trekant" style="padding-left:10px;">Dine fordele</a>
        <ul>
            <li style="width:300px;"><a href="info.asp?id=24">Effektiviser dit salgs- og marketingarbejde</a></li>
            <li style="width:300px;"><a href="info.asp?id=25">Effektiviser de daglige rutiner</a></li>
            <li style="width:300px;"><a href="info.asp?id=26">Opnå større økonomisk sikkerhed</a></li>
            <li style="width:300px;"><a href="info.asp?id=27">Skab tilfredshed blandt medarbejdere og kunder</a></li>
            <li style="width:300px;"><a href="info.asp?id=28">Få rådgivning om dataanvendelse</a></li>

        </ul>
</li>

<li style="width:83px;"><a href="#" class="trekant" style="padding-left:10px;">Privatdata</a>

    <ul>
            <li style="width:200px;"><a href="info.asp?id=6">Salgs- og marketingkampagner</a></li>
            <li style="width:200px;"><a href="info.asp?id=5">Intelligent segmentering</a></li>
            <li style="width:200px;"><a href="info.asp?id=7">Opdatering af din kundedatabase</a></li>
            <li style="width:200px;"><a href="info.asp?id=8">Kreditvurdering</a></li>
    </ul>
</li>

<li style="width:96px;"><a href="#" class="trekant" style="padding-left:10px;">Erhvervsdata</a>
        <ul>
            <li style="width:250px;"><a href="info.asp?id=16">Salgs- og marketingkampagner</a></li>
            <li style="width:250px;"><a href="info.asp?id=15">Intelligent segmentering</a></li>
            <li style="width:250px;"><a href="info.asp?id=17">Regnskab og nøgletal</a></li>
            <li style="width:250px;"><a href="info.asp?id=18">Kreditvurdering</a></li>
            <li style="width:250px;"><a href="info.asp?id=87">Dataintegration til CRM og ERP-systemer</a></li>

        </ul>
       
</li>

<li style="width:96px;"><a href="#" class="trekant" style="padding-left:10px;">International</a>

                <ul>
                    <li><a href="international.asp?id=66">General info</a></li>
                    <li><a href="b2b.asp">B2B</a></li>
                    <li><a href="b2c.asp">B2C</a></li>
                    <li><a href="nyhed_en.asp?id=90&formID=2">Newsletter</a></li>
                    <li><a href="kontakt_en.asp?id=108">Contact</a></li>
                </ul>

</li>


</ul>
</div>
Avatar billede natsprinter Nybegynder
15. august 2007 - 15:08 #1
Her er løsningen - Position:static; sikre at alt spiller i IE7 også :-)

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {    position:static; /* Sikre at menuen ikke hænger i IE7 */   
    left: auto;
}
Avatar billede olebole Juniormester
15. august 2007 - 17:47 #2
<ole>

Hvordan løser du så IE6?

/mvh
</bole>
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