CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

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!

Synes godt om

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"> </td>
<td colspan="2" class="header"> </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"><a href="#">Injuries</a>
<a href="#">Characters</a>
<a href="#">Body Parts</a> </td>
<td width="297" class="content"> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 </td>
<td width="424" class="content"> </td>
</tr>
</table>
</body>
</html>

Synes godt om

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;
}

Synes godt om

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", "");
}
}
}
}
}

Synes godt om

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>

Synes godt om

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.

Synes godt om

bgo Nybegynder

23. november 2006 - 23:40 #6

jeg bruger selv denne: http://www.dynarch.com/products/dhtml-menu/

Synes godt om

olebole Juniormester

24. november 2006 - 14:00 #7

bgo >> Den lider af samme problem: Inkompatibel med XHTML =)

Synes godt om

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...

Synes godt om

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 )=

Synes godt om

bgo Nybegynder

24. november 2006 - 21:14 #10

olebole:

hehe som det ikke bliver parset som alligevel ;)

Synes godt om

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 ;)

Synes godt om

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 =)

Synes godt om

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

Synes godt om

olebole Juniormester

28. november 2006 - 10:44 #14

Okay - selvtak ;o)

Synes godt om

bgo Nybegynder

28. november 2006 - 11:39 #15

olebole: okay, så blev jeg igen lidt klogere ;) tak :)

Synes godt om

olebole Juniormester

28. november 2006 - 14:23 #16

selvtak - og tak for points herfra :)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS

22/11

Test: Den snusfornuftige Volkswagen ID.3 blevet til lidt af el-bisse

22/11

Vil købe tele-løsninger til det offentlige for 370 millioner kroner

22/11

Nørgaard: Det er de neuro-divergente originalers tid

22/11

Sker helt åbenlyst: Ansatte i den kinesiske stat sælger borgernes personlige data på hemmelige internet-fora

22/11

Efterspørgslen på AI-regnekraft er enorm - og det smitter af på priserne: "Vi kan sælge næsten alt, hvad vi får ind"

22/11

Derfor bliver den amerikanske tvangs-opdeling af Google nok ikke til noget

22/11

Nyt værtøj fra Microsoft: Snart kan du reparere nedbrudte Windows-enheder på distancen

22/11

Vi har fundet 10 ledige it-stillinger, som du kan søge netop nu

22/11

Politiet skriver kontrakt på 75 millioner kroner med dansk it-firma: Medarbejdere skal flytte ind hos politiet

22/11

Kombit gør klar til at købe it-konsulenter for 140 millioner kroner - her er planen

22/11

Droner i krig - sådan anvendes de mest effektivt på slagmarken

Vis flere artikler

IT-JOB

SDC A/S

Team Leader - AML (Regulatory & Financial Reporting)

Danoffice IT

Microsoft CSP Salgsspecialist

Udviklings- og Forenklingsstyrelsen

Projektleder til komplekse IT-infrastruktur og implementeringsprojekter

FTFa

Kvantitativ analysekonsulent med solid forretningsforståelse

Netcompany A/S

Network Engineer

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I går 22:30	Underlig meddelelse på skærmen Af Jordegern i E-mail programmer
I går 15:56	Navigation i Peugeot 3-2008 fra 2017 Af arnepedersen i Andet software
I går 14:10	Outlook henter ikke mails Af TTA i Office & Kontorpakker
I går 13:58	vise billeder i kartotek med store ikoner inklusive optagelsesdato Af Malm i Billedbehandling
I går 13:35	Adobe Elements 2019, Organizer Crasher Af mort1 i Billedbehandling