Avatar billede madsdj Nybegynder
23. november 2006 - 14:34 Der er 15 kommentarer og
1 løsning

CSS/Javascript dropdown menu: browser problemer!

Hej, Jeg skal bruge en drop down menu til en html-side, og har fundet en der er bygget op omkring et javascript og en .css fil. Jeg har dog store problemer med at få det til at virke ordentligt. Menuen virker fint i FF2, men fungerer slet ikke i IE6. Er der nogen der har nogen råd? Eller et forslag til en anden menuskabelon, der virker bedre?

side: www.hullet.net/anum/menutest2.html

På forhånd tak!
Avatar billede madsdj Nybegynder
23. november 2006 - 14:34 #1
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome to anum:fx</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
<link rel="StyleSheet" href="styles/menu.css" type="text/css" />

<script language="JavaScript" type="text/javascript" src="menu2/menuscript.js"></script>

</head>

<body>
<table width="800" height="350" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="78" height="100">&nbsp;</td>
    <td colspan="2" class="header">&nbsp;</td>
    <td class="menu">
    <ul id="nav">
  <li><a href="index.html">Index</a></li>
<li>|</li>
<li><a href="#">Make-up</a>
    <ul>
    <li><a href="#">Injuries</a></li>
    <li><a href="#">Characters</a></li>
    <li><a href="#">Body Parts</a></li>
    <li><a href="#">Event make-up</a></li>
    </ul>
</li>
<li>|</li>
<li><a href="#">Step-by-step</a></li>
<li>|</li>
<li><a href="#">References</a>
    <ul>
    <li><a style="padding-right:50px"href="#">Movies</a></li>
    <li><a style="padding-right:50px"href="#">Events</a></li>
    </ul>
</li>
<li>|</li>
<li><a href="#">About</a></li>
<li>|</li>
<li><a href="#">Contact</a></li>
</ul>
</td>
  </tr>
  <tr>
    <td colspan="2" class="leftbar"><p><a href="#">Injuries</a></p>
      <p><a href="#">Characters</a></p>
    <p><a href="#">Body Parts</a> </p></td>
    <td width="297" class="content"><p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p></td>
    <td width="424" class="content">&nbsp;</td>
  </tr>
</table>
</body>
</html>
Avatar billede madsdj Nybegynder
23. november 2006 - 14:34 #2
MENU.CSS:
/* Top drop down menu */
#nav {
    font-family: Verdana, Arial, sans serif;
    font-size: 10px;
    color: #000000;
    font-weight: bold;
}

.menu ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    cursor: pointer;
}

.menu li { /* all list items */
    float: left;
    position: relative;
    padding-right: 2px;
}

.menu li ul { /* second-level lists */
    display: none;
    position: absolute;
    top: 1em;
    left: 0;
}

.menu li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
    top: auto;
    left: auto;
}

.menu li:hover ul, li.over ul { /* lists nested under hovered list items */
    display: block;
    background-color: #FFFFFF;
    border: 1px solid #000;
    padding: 5px;
    width: 100px;
}

.menu a {
    display: block;
    font-family: Verdana, Arial, sans serif;
    font-size: 10px;
    color: #000000;
    text-decoration: none;
}

.menu a:hover {
    display: block;
    font-family: Verdana, Arial, sans serif;
    font-size: 10px;
    color: #990033;
    text-decoration: none;
}
Avatar billede madsdj Nybegynder
23. november 2006 - 14:35 #3
MENUSCRIPT.JS
/*Drop Down Menu*/
startList = function() {
    if (document.all&&document.getElementById) {
        navRoot = document.getElementById("nav");
        for (i=0; i<navRoot.childNodes.length; i++) {
            node = navRoot.childNodes[i];
            if (node.nodeName=="LI") {
                node.onmouseover=function() {
                    this.className+=" over";
                }
                node.onmouseout=function() {
                    this.className=this.className.replace(" over", "");
                }
            }
        }
    }
}
Avatar billede olebole Juniormester
23. november 2006 - 14:51 #4
<ole>

- men JavaScriptet er ikke kompatibelt med XHTML, så det er nok en fordel at skrive koden i HTML4.01.
XHTML1.0-Transitional parses i alle browsere som skidt HTML (koden kommer aldrig i nærheden af browserens XML-parser) - så det giver dig alligevel ingen fordele  =)

Derudover er det elendigt performende at ændre CSS-klasse på HTML-elementer. I stedet bør man skifte elementernes style-properties

/mvh
</bole>
Avatar billede sibbelone Nybegynder
23. november 2006 - 14:56 #5
http://www.javascriptmenubuilder.com/
Der en online menu builder og den er nem at gå til, efter du har opbygget din menun downloder du det hel og sætter det ind.
Avatar billede bgo Nybegynder
23. november 2006 - 23:40 #6
Avatar billede olebole Juniormester
24. november 2006 - 14:00 #7
bgo >> Den lider af samme problem: Inkompatibel med XHTML  =)
Avatar billede madsdj Nybegynder
24. november 2006 - 15:19 #8
Tak for svarene alle tre! til Ole: Er det korrekt forstået, at der altså ikke er nogen ulemper ved at bruge html4.01? For så tror jeg det er det, der bliver løsningen...
Avatar billede olebole Juniormester
24. november 2006 - 15:24 #9
Som WWW ser ud idag, er der ingen ulemper ved at bruge HTML4.01. Faktisk er der ikke én eneste browser på markedet, der har implementeret en ordentlig understøttelse af XHTML. Prøv at læse:
    http://www.eksperten.dk/artikler/537
    http://www.eksperten.dk/artikler/538

De er ikke helt opdaterede - men der er ikke meget i substansen, der har ændret sig  )=
Avatar billede bgo Nybegynder
24. november 2006 - 21:14 #10
olebole:

hehe som det ikke bliver parset som alligevel ;)
Avatar billede bgo Nybegynder
24. november 2006 - 21:24 #11
olebole:

iøvrigt, selvom xhtml er et stykke ude i fremtiden, ville det da være interessant at vide hvordan den er inkompatiel ;)
Avatar billede olebole Juniormester
27. november 2006 - 11:02 #12
Scriptet er baseret på HTML-DOM. Det går ikke, da XHTML jo er et subset af XML - og der derfor skal anvendes XML-DOM. F.eks. kan attributter ikke læses og sættes direkte ... f.eks:
    var sID = ELEMENT.id;

Det skal gøres med setAttribute og getAttribute ... f.eks:
    var sID = ELEMENT.getAttribute("id");

Desuden kan du ikke indsætte/læse HTML-strenge i dokumentet med innerHTML. innerHTML har aldrig været del af en officiel standard og kan slet ikke bruges under X(HT)ML - og burde heller ikke kunne bruges under HTML, da den strider lodret mod W3C's DOM-tanke.

Derudover findes de forskellige HTML-collections på dokument-objektet ikke under X(HT)ML ... f.eks. document.images, document.forms, m.fl.
I det hele taget har dokument-objektet ikke den 'særstatus' under XHTML, som det kendes fra HTML.

Det er de fleste/vigtigste forskelle - men ikke dem alle  =)
Avatar billede madsdj Nybegynder
27. november 2006 - 21:47 #13
Der blev det lige teknisk nok for mig, men har nu fået en virksom menu på siden. Så tak skal du have Ole, smid et svar og du får point! mvh.Mads
Avatar billede olebole Juniormester
28. november 2006 - 10:44 #14
Okay - selvtak  ;o)
Avatar billede bgo Nybegynder
28. november 2006 - 11:39 #15
olebole: okay, så blev jeg igen lidt klogere ;) tak :)
Avatar billede olebole Juniormester
28. november 2006 - 14:23 #16
selvtak - og tak for points herfra  :)
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