Avatar billede showoff Nybegynder
14. maj 2007 - 09:00 Der er 7 kommentarer og
1 løsning

Dropdownmenu placeres forkert i Firefox

Hej

Har lavet en topmenu med 4 punkter som har dropdownmenu ved mouseover. Virker fint i Explore, men i Firefox placeres alle dropdownmenuer i venstre side. se http://www.showoffmedia.dk/hlt/testside.asp

Nogle som har en ide til hvordan dette kan rettes?
Avatar billede hundevennen Nybegynder
14. maj 2007 - 09:54 #1
du må lige vise din stylesheetkode
Avatar billede hundevennen Nybegynder
14. maj 2007 - 09:55 #2
Firefox er meget specifik med kode hvorimod IE er mere "ligeglad"
Avatar billede showoff Nybegynder
14. maj 2007 - 10:04 #3
ok, den kommer her.
<style type="text/css">
<!--
#page {
    background-color: #ffffff;
    background-position: center center;
    text-align: center;
}
#menu {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    width: 800px;
    background-color: #FFFFFF;
    height: 25px;
    text-align: left;
    display: block;
    border: 0px solid #000000;
    position: relative;
    line-height: 25px;
    padding-right: 20px;
}
#menu a {
    text-decoration: none;
    font-size: 10px;
    color: #000000;
    background-color: #FFFFFF;
    margin: 0px;
    padding: 5px;
    padding-right: 70px;
    border-top: none;
    border-right: 0px solid #000000;
    border-bottom: none;
    border-left: none;
    }
#menu a:hover {
    background-color: #FFFFFF;
}
#undermenu {
    color: #000000;
}
#undermenu a {
    color: #000000;
    display: block;
    background-color: #DCDDDF;
    margin: 1px;
    height: 16px;
    border: 0px none;
    text-align: left;
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 10px;
    padding-left: 5px;
}
#undermenu a:hover {
    background-color: #E8E8E8;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>


<div id="page">
  <div id="menu">
    <div id="submenu1" style="position:absolute; width:130px; height:82px; z-index:1; background-color: #ffffff; layer-background-color: #99CCFF; border: 1px none #000000; top: 25px; visibility: hidden;" onMouseOver="MM_showHideLayers('submenu1','','show')" onMouseOut="MM_showHideLayers('submenu1','','hide')">
      <div id="undermenu">                  
                  <a href="#">Ambition & vision</a>
                  <a href="#">Klientforhold</a>
                <a href="#">Riskmanagement</a>
      </div>
    </div>
    <a href="#" onMouseOver="MM_showHideLayers('submenu1','','show')" onMouseOut="MM_showHideLayers('submenu1','','hide')">Firmaet</a>
   
    <div id="submenu2" style="position:absolute; width:130px; height:109px; z-index:2; background-color: #ffffff; layer-background-color: #99CCFF; border: 1px none #000000; top: 25px; visibility: hidden;" onMouseOver="MM_showHideLayers('submenu2','','show')" onMouseOut="MM_showHideLayers('submenu2','','hide')">
      <div id="undermenu">
                  <a href="#">HR-Strategi</a>
                  <a href="#">Jurister</a>
                <a href="#">Sekretærer</a>
                <a href="#">Karriere</a>
      </div>
    </div>
    <a href="#" onMouseOver="MM_showHideLayers('submenu2','','show')" onMouseOut="MM_showHideLayers('submenu2','','hide')">Personer</a>


    <div id="submenu3" style="position:absolute; width:130px; height:55px; z-index:2; background-color: #ffffff; layer-background-color: #99CCFF; border: 1px none #000000; top: 25px; visibility: hidden;" onMouseOver="MM_showHideLayers('submenu3','','show')" onMouseOut="MM_showHideLayers('submenu3','','hide')">
      <div id="undermenu">
                  <a href="#">Kontaktoplysninger</a>
                  <a href="#">Selskabsoplysninger</a>
      </div>
    </div>
    <a href="#" onMouseOver="MM_showHideLayers('submenu3','','show')" onMouseOut="MM_showHideLayers('submenu3','','hide')">Kontakt</a>

    <div id="submenu4" style="position:absolute; width:200px; height:460px; z-index:2; background-color: #ffffff; layer-background-color: #99CCFF; border: 1px none #000000; top: 25px; visibility: hidden;" onMouseOver="MM_showHideLayers('submenu4','','show')" onMouseOut="MM_showHideLayers('submenu4','','hide')">
      <div id="undermenu">
                  <a href="#">Ansættelsesret</a>
                  <a href="#">Bestyrelsesarbejde</a>
                <a href="#">Energiselskaber</a>
                  <a href="#">Entrepriseret</a>
                <a href="#">Finansielle virksomheder</a>
                  <a href="#">Fast ejendom og lejeret</a>
                <a href="#">Forsikring og erstatning</a>
                  <a href="#">Internationalt</a>
                <a href="#">Konfliktløsninger</a>
                  <a href="#">Kontakter & IT</a>
                <a href="#">Læger & Tandlæger</a>
                  <a href="#">Offentlige myndigheder</a>
                <a href="#">Organisationer</a>
                  <a href="#">Plan- og miljøret</a>
                <a href="#">Transportret</a>
                  <a href="#">Virksomhedsoverdragelse & generationsskifte</a>
                <a href="#">Udbudsret</a>
      </div>
    </div>
    <a href="#" onMouseOver="MM_showHideLayers('submenu4','','show')" onMouseOut="MM_showHideLayers('submenu4','','hide')">Kompetencer</a>


</div>
Avatar billede hundevennen Nybegynder
14. maj 2007 - 10:05 #4
Når jeg med et css valideringsværktøj i Firefox kigger på din kode er der ikke nogen placering af din undermenuer altså noget med left 100px for din første dropdownmenu og 200px for den næste o.s.v.
Avatar billede hundevennen Nybegynder
14. maj 2007 - 10:07 #5
altså noget med

undermenu a {
position: absolute;
top:10px;
left:75px;
Avatar billede showoff Nybegynder
14. maj 2007 - 10:16 #6
Perfekt det var da det som skulle til, tak poster du et svar
Avatar billede hundevennen Nybegynder
14. maj 2007 - 12:07 #7
værsesko
Avatar billede olebole Juniormester
15. maj 2007 - 15:04 #8
<ole>

"Firefox er meget specifik med kode hvorimod IE er mere "ligeglad""

- det er langtfra korrekt. FF godtager mindst ligeså meget invalid kode ... det er bare på lidt andre områder  =)

/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