Javascript en Mozilla

[mikeemmessen]

Hallo allemaal

Ik ben bezig met m'n eerste website. Hiervoor heb ik een leuke template gevonden. De website heeft een zeer korte laadtijd. Ik heb de template alvast ge-upload zodat jullie kunnen zien waar ik het over heb: www.freedomresearch.com

Helaas ben ik er inmiddels achter dat deze template niet werkt op Mozilla Firefox. IE en Maxthon geven geen problemen. Het probleem met de Firefox browser is dat hij de knoppen niet als links herkent. Firefox geeft de startpagina dus wel correct weer, maar verder dan de startpagina kom je niet. Met IE is dat dus geen probleem. Ik heb geen idee of het probleem zit in de html-code of in de stylesheet, die javascript gebruikt.

Ik vermoed dat ik met een kleine aanpassing aan de code voor de knoppen deze template wel werkzaam kan krijgen voor Firefox. Ik heb alleen geen idee wat ik aan de code moet veranderen om de template werkzaam te krijgen in Firefox. Ik heb de code voor 1 knop onderaan deze post uitgespeld. Daaronder heb ik het class-element van de .css stylesheet gepost waar de knop gebruik van maakt.

Mijn vraag: ziet iemand in de onderstaande code de oorzaak van het probleem dat de knop niet als link wordt herkend door Firefox?

<tr><a href="link1.html"><td width=100% height=20 class=l1a onmouseover="this.className='l1b';" onmouseout="this.className='l1a';">
LINK 1
</td></a></tr>

De "class" verwijzing linkt naar de .css stylesheet:

.l1a
{
BORDER-RIGHT: #ffffff 1px;
BORDER-TOP: #ffffff 1px;
FONT-SIZE: 10pt;
BORDER-LEFT: #ffffff 1px;
COLOR: #666666;
BORDER-BOTTOM: #ffffff 1px;
FONT-FAMILY: Arial;
BACKGROUND-COLOR: #cccccc;
TEXT-ALIGN: left;
TEXT-DECORATION: none
}
.l1b
{
BORDER-RIGHT: #ffffff 1px;
BORDER-TOP: #ffffff 1px;
FONT-SIZE: 10pt;
BORDER-LEFT: #ffffff 1px;
COLOR: black;
BORDER-BOTTOM: #ffffff 1px;
FONT-FAMILY: Arial;
BACKGROUND-COLOR: gray;
TEXT-ALIGN: left;
TEXT-DECORATION: none
}




Wie o wie herkent in de bovenstaande code de oorzaak van het probleem dat de knoppen niet als link in Firefox functioneren? En wie helpt mij dit probleem op te lossen?

Alvast bedankt!

Mike

 

[killer555]

reageren ze wel als je je muis eroverheen haalt? anders moet je misschien ff iets als script type plaasten;

bijv. <SCRIPT type="text/javascript"> of iets in die richting.

 

[mikeemmessen]

knoppen niet als links herkend in Mozilla

Ja, de knoppen reageren wel (javascript) als je de muis er overheen haalt, ook in Mozilla (zie www.freedomresearch.com).

Het probleem met Mozilla is dat ie de knoppen niet als links herkent.

groetjes, Mike

 

[peter vazed]

Hoezo javascript????????????

En wat is hier niet goed:

<table width=100% cellpadding=0 cellspacing=0 border=0 height=10>
<tr >
<!-- LINK 1 -->
<a href="link1.html"><td width=10% class=l5a onmouseover="this.className='l5b';" onmouseout="this.className='l5a';">
&nbsp;Link 1
</td></a>
<!-- LINK 2 -->
<a href="link2.html"><td width=10%  class=l5a onmouseover="this.className='l5b';" onmouseout="this.className='l5a';">

&nbsp;Link 2</td></a>
<!-- LINK 3 -->
<a href="link3.html"><td width=10% class=l5a onmouseover="this.className='l5b';" onmouseout="this.className='l5a';">
&nbsp;Link 3</td></a>
<!-- LINK 4 -->
<a href="link4.html"><td width=10% class=l5a onmouseover="this.className='l5b';" onmouseout="this.className='l5a';">
&nbsp;Link 4</td></a>
<td class=c2 >&nbsp;</td></tr></table>

Waarvoor is een tabel bedoelt?
Wat zet je IN een cel?

Overigens zitten er een 5 tal fouten in de html code van de pagina.

 

[mikeemmessen]

Beste Peter

Zoals je merkt ben ik een beginner. De pagina die je hebt bekeken was een gratis template. Ik zou hem graag gebruiken voor mijn website, maar dan moet ik hem wel eerst functioneel krijgen voor Mozilla.

Je noemt dat er 5 fouten in de html-code zitten. Ik zou het erg op prijs stellen als je me kunt vertellen waar die fouten zitten, en hoe ik ze eruit kan halen. Ik zou me kunnen voorstellen dat dat die html-fouten de oorzaak zijn van mijn probleem, omdat ik las dat Mozilla veel meedogenlozer is met HTML-fouten dan IE.

Als de oorzaak van mijn probleem html-fouten blijkt te zijn, bied ik mijn excuses aan dat ik mijn vraag op het verkeerde forum heb gepost.

De vragen die je stelt kan ik helaas niet allemaal beantwoorden; hier volgt een poging:

Hoezo javascript????????????
Volgens de template-designer zijn de effecten van de knoppen geschreven in javascript.

En wat is hier niet goed:
Ik heb echt geen idee; suggesties zijn meer dan welkom!

Waarvoor is een tabel bedoelt? en Wat zet je IN een cel?
Nogmaals, de code is direct afkomstig van een template. Ik ben inmiddels handig genoeg om een werkende template naar mijn wensen aan te passen, maar als ontwikkelaar ben ik echt maar een beginneling.

Alvast bedankt voor je hulp!

Mike

 

[peter vazed]

Haal max op:
http://www.htmlbeauty.com/

kun je de code laten controleren.

Je linken maken gebruik van een style: CSS
en niet javascript.

Je zet tekst (href link) verkeerd,
moet IN de cel.
Als je de reeds door mij geposte tabel ziet, wet je wat ik bedoel.
Hoort zo te zijn:
<table>
<tr>
<td>
tekst
</td>
</tr>
</table>

je hebt:
<table>
<tr>
tekst
<td>
tekst
</td>
tekst
</tr>
</table>

 

[mikeemmessen]

hele knop als link

Beste Peter

Als ik, zoals je in je vorige reactie voorstelt, de <a href=""> ná de <td> zet, werkt niet meer de hele knop als link, maar alleen nog de tekst in de knop... en ik vond het nou juist zo leuk dat de hele knop als link fungeert!

Ik begrijp inmiddels wel dat deze manier van opschrijven "bad practice" is, die niet door w3c geaccepteerd wordt, en kennelijk ook niet door Mozilla, maar wel door IE.

Zou jij misschien een manier weten om de code van deze knop zo aan te passen dat de link nog steeds voor de hele knop geldt, en niet slechts voor de tekst in de knop?

En sorry van mijn vergissing over javascript. Ik zie nu idd dat de site slechts een .css en een .htm bestand bevat.

Enorm bedankt alvast!

groetjes, Mike

 

[mikeemmessen]

oplossing

Ik wilde nog even de oplossing opschrijven voor het probleem dat ik hier gepost heb.
Met .css stylesheets is het helemaal niet nodig om gebruik te maken van tabellen om knoppen te maken, zoals de maken van de template gedaan had.

Ik heb inmiddels andere knoppen gevonden op http://www.alvit.de/css-showcase/css-navigation-techniques-showcase.php

groetjes, Mike

 

[jeroendenoot]

Hallo, ik wil even een fout herstellen van Peter. In die HTML zat wel degelijk Javascript, namelijk:

onmouseover="this.className='l5b';" onmouseout="this.className='l5a';"

Dit is een combinatie tussen javascript en HTML.