Avatar billede mydream Nybegynder
08. november 2007 - 11:16 Der er 6 kommentarer

Dropdown menu problem i Mozilla

Jeg har lavet en dropdown menu, der skal folde sig ud over indholdet. Det fungerer fint i IE men i Mozilla, flytter indholdet sig nedad for at gøre plads til dropdownmenuen.

Er der nogen der har oplevet samme problem?
Avatar billede fennec Nybegynder
08. november 2007 - 11:27 #1
Problemet kan være en af 1 mill forskellige ting.

Hvis du nu viste os noget kode, kunne vi løse problemet for dig.
Avatar billede mydream Nybegynder
08. november 2007 - 11:37 #2
<link rel="stylesheet" type="text/css" href="/sfbpf/topmenu/total.css">
<table>
    <tr>
        <td>
        <div id="box">
        <div id="menucont">
       
        <div class="menublock"
          onmouseover="this.className='display'"
            onmouseout="this.className='menublock'">
                <a class="tl" href="#">Menuoverskrift</a>
                    <div class="subs">
             
        <a class="sl" href="/fer.asp">menupunkt</a>
       
        <div class="Sidste">       
        <a class="sl" href="/fer.asp">menupunkt</a></div>   
        </div>
        </div>
       
        <div class="menublock"
          onmouseover="this.className='display'"
            onmouseout="this.className='menublock'">
                <a class="tl" href="#">Menuoverskrift</a>
                    <div class="subs">
             
        <a class="sl" href="/fer.asp">menupunkt</a>
       
        <div class="Sidste">       
        <a class="sl" href="/fer.asp">menupunkt</a></div>   
        </div>
        </div>
       
       
        </div>
        </div>
        </td>
    </tr>
    <tr>
        <td width="805">
            <div class="content">   
            <table>
            <tr>
           
            <td width="100%" align="left" valign="top">
           
            her er indholdet
           
            </td>
            </tr>
            </table>
           
           
            </div>
        </td>
    </tr>
</table>
       
</body>
</html>
Avatar billede mydream Nybegynder
08. november 2007 - 11:37 #3
/* All the content boxes belong to the content class. */
.content
{
    position:relative;
    margin-top:0px;
    margin-left:0px;
    padding:0px 0px 0px 0px;
    height: auto;
    font-family: Helvetica, Arial, Verdana, sans-serif;
}
.tl {

}
#box
{
    position:relative;
    width:957px;
    margin-top:0px;
    margin-left:0px;
    z-index: 200;
    height: 34px;
}

    /* controls the menu */
#menucont
{
    width: 957px;
    height: 30px;

    position: relative;
background-image:url(menu.jpg);

}
    .menublock,
    .display
{
    float:left;
    width: 120px;


}

.subs
{
border-style:solid;
border: 1px solid #ccc;
filter:
    progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135, Strength=30);
background-color:#FFFFFF;
}

.subs a
{
    display: block;

}

    /* This makes the drop down disappear when not used */
.menublock
.subs
{
    display: none;
}

    /* The fonts for cl, dl, sl and tl SELVE MENUPUNKTERNE I TOPBAREN*/
a.tl, a.tl:hover, a.tl:active, a.sl, a.sl:hover, a.sl:active, a.cl, a.cl:hover, a.cl:active, a.dl, a.dl:hover, a.dl:active
{
    display: block;
    text-decoration: none;
    color: #000;
    margin: 3px 0px 0px 0px;
    padding: 4px;
    border: none;
    color: #FFFFFF;
    font-weight: bold;
    height:26px;
}

    /* The active drop down item - refer to as tl MARKER TOP MED RØD VED VALGT MENUPUNKT*/
a.tl:hover, a.tl:active , a.sl:hover, a.sl:active
{
color:#FF0000;
}
   
/* The background color of the drop down item when on a sub page */
a.cl, a.cl:hover
{
background-color:#A6E6FF;
}

/* The drop down itself - refer to as sl DENNE ER DROPDOWNMENUEN*/
a.sl, a.sl:hover, a.sl:active{
    text-align: left;
    font-weight: normal;
    height: 14px;
    margin: 0 0px 0 0px ;
    padding: 4px;
    background-color:#FFFFFF;
    color:#000;
    border-bottom: 1px solid #006689;
border-collapse:collapse;

}
/* det sidste menupunkt i hver kasse*/
.Sidste a.sl, .Sidste a.sl:hover, .Sidste a.sl:active{
border:none;
}

.subs a.sl:active
{
    display: block;
}

/*mouseover farven på de små menupunkter*/
.subs a.sl:hover
{
    display: block;
    background-color: #E6EDEC;
background-color:#A6E6FF;
}


.subs a.dl:active
{
    display: block;
}

.subs a.dl:hover
{
    display: block;
    background-color: #E6EDEC;
}

#menu
{
    position:absolute;
    /*left:50%;*/
    width:770px;
    margin-top:40px;
    margin-left:0px;
    background-color: #D82407;
    font-family: Helvetica, Verdana, Arial, sans-serif;
    /*font-size: 18px;*/
    font-weight: bold;
    color: #fff;
    text-align: left;
    z-index: 200;
    letter-spacing: 1px;
    padding: 3px 8px 3px 3px;
    height: 20px;
    /* The hack */
    voice-family: "\"}\"";
    voice-family: inherit;
}

    /* be nice to Opera 5 rule. */
body>#menu
{
    width: 770px;
}

#menu2
{
    position:absolute;
    /*left:50%;*/
    width:770px;
    margin-top:10px;
    margin-left:0px;
    background-color: #FFFFFF;
    font-family: Helvetica, Verdana, Arial, sans-serif;
    /*font-size: 13px;*/
    font-weight: bold;
    color: #D82407;
    text-align: right;
    padding-top:10px;
    padding-left:0px;
    padding-right: 10px;
    margin-left:0px;
    height: 30px;
    /* Here again is the hack. */
    voice-family: "\"}\"";
    voice-family: inherit;
}

    /* be nice to Opera 5 rule. */
body>#menu2
{
    width: 770px;
}
Avatar billede fennec Nybegynder
08. november 2007 - 11:48 #4
Den flytter også i IE hos mig, når jeg samler din kode.
Har du et link til en side hos dig, hvor vi kan se fejlen i stedet?
Avatar billede mydream Nybegynder
08. november 2007 - 11:50 #5
Ja undskyld, det er fordi du mangler dette i toppen af dokumentet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Prøv igen, så skulle den ikke flytte i IE
Avatar billede fennec Nybegynder
08. november 2007 - 12:25 #6
Jeg har altid en doctype på mine sider, og den hopper stadig :o)
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

IT-JOB

LINK Mobility

Support Specialist

Forsvarsministeriets Materiel- og Indkøbsstyrelse

Teknisk systemansvarlig / ingeniør inden for taktisk datalink

AL Sydbank A/S (tidligere Arbejdernes Landsbank)

Tech Lead til Datacenter Operations