Javescript menu vertoont rariteiten

nessler · 20 jun 2011

Hoi,

ik heb een website en daarvoor een menuutje gemaakt met All Web Menus indertijd.
Heb nu een update op de pc gezet en dus ook de menu's aangepast, maar het probleem wat ervoor ontstond is er nog steeds.

Op de meeste pagina's ziet het menu eruit zoals zou moeten,
echter op sommige lijkt het alsof het menu "embossed" is, terwijl er aan de code niks verandert is.

Ligt dit puur aan de versie van IE waar ik hem op test ?

kijk en vergelijk hier:
menu ok : http://www.fortherestless.com/2010.html
menu niet ok: http://www.fortherestless.com/tours/2010/jan26.html

Op deze pagina is wel een ander javascript aanwezig, om de foto's in te laden.
Misschien dat hier het probleem schuilt ?

csshunter · 22 jun 2011

Hoi nessler,
Aha, bij IE loopt er een streepje door:

Nu loopt er bij IE wel meer een streepje door, maar goed. Eerst maar eens kijken hoe het menu er in het echt uit ziet, als het javascript voor het menu is toegepast. Via de gegenereerde broncode zien we:

HTML:

<!-- ******** BEGIN CODE VOOR menu ******** --> 
<span id="xawmMenuPathImg-menu" style="position: absolute; top: -50px;"><img 
name="awmMenuPathImg-menu" id="awmMenuPathImg-menu" 
src="http://www.fortherestless.com/awmmenupath.gif" alt=""></span>
 
<script type="text/javascript">var MenuLinkedBy='AllWebMenus [2]', awmBN='GN'; awmAltUrl='';</script>
 
<script charset="UTF-8" src="http://www.fortherestless.com/numenu.js" language="JavaScript1.2" 
type="text/javascript"></script>

<script src="http://www.fortherestless.com/tours/2010/awmdata/awmlib2.js"></script>
 
<script type="text/javascript">awmBuildMenu();</script>

<style>
.awmTR {background-color:transparent !important;border:none;} 
.awmTB, .awmTB td{table-layout:auto;border-collapse:separate;padding:0px;margin:0px;border:none} 
.awmTB, .awmTB tbody{background-color:transparent}
.AWMST3 {position:absolute; -moz-border-radius:0px / 0px;width:100%; visibility:hidden;
text-align:left; background-color:transparent;border-style:none; border-width:0px; 
border-color:#000000; cursor:default;z-index:2}
.AWMST3 tbody {background-color:transparent;}
.AWMSTTD3 {border-style:none;border-width:0px;text-align:left; background-color:transparent;}
.AWMSTBG3 {position:absolute;-moz-border-radius:0px / 0px;left:0px;top:0px;border-style:none; 
border-width:0px; border-color:#000000;background-color:#1276B8;z-index:auto;}
.AWMSTBG3 tbody {background-color:transparent;}
.AWMSTCBG3 {position:absolute;-moz-border-radius:0px / 0px;line-height:normal;visibility:hidden;
background-color:#1276B8;border-style:none;border-width:0px;border-color:#000000;z-index:2}
@media print {.AWMSTCBG3{display:none}}
.AWMST4 {position:absolute;-moz-border-radius:0px / 0px;width:100%;visibility:inherit;
text-align:center; font:bold 14px Trebuchet MS !important; color:#FFFFFF;
background-color:transparent;border-style:none; border-width:0px; border-color:#000000;  
cursor:pointer;z-index:2}
.AWMST4 tbody {background-color:transparent;}
.AWMSTTD4 {border-style:none;border-width:0px;text-align:center; 
font:bold 14px Trebuchet MS !important; color:#FFFFFF;background-color:transparent;}
.AWMSTBG4 {position:absolute;-moz-border-radius:0px / 0px;left:0px;top:0px;border-style:none; 
border-width:0px; border-color:#000000;background-color:#1276B8;z-index:auto;}
.AWMSTBG4 tbody {background-color:transparent;}
.AWMSTCBG4 {position:absolute;-moz-border-radius:0px / 0px;line-height:normal;visibility:inherit;
background-color:#1276B8;border-style:none;border-width:0px;border-color:#000000;z-index:2} 
@media print {.AWMSTCBG4{display:none}}
.AWMST5 {position:absolute;-moz-border-radius:0px / 0px;width:100%;visibility:inherit;
text-align:center; font:bold 14px Trebuchet MS !important; color:#E7C7A3;
background-color:transparent;border-style:none; border-width:0px; border-color:#000000; 
cursor:pointer;z-index:2}.AWMST5 tbody {background-color:transparent;}
.AWMSTTD5 {border-style:none;border-width:0px;text-align:center; 
font:bold 14px Trebuchet MS !important; color:#E7C7A3;background-color:transparent;}
.AWMSTBG5 {position:absolute;-moz-border-radius:0px / 0px;left:0px;top:0px;border-style:none; 
border-width:0px; border-color:#000000;background-color:#212121;z-index:auto;}
.AWMSTBG5 tbody {background-color:transparent;}
.AWMSTCBG5 {position:absolute;-moz-border-radius:0px / 0px;line-height:normal;
visibility:inherit;background-color:#212121;border-style:none;border-width:0px;
border-color:#000000;z-index:2} 
@media print {.AWMSTCBG5{display:none}}
.AWMST6 {position:absolute;-moz-border-radius:0px / 0px;width:100%;visibility:inherit;
text-align:left; font:14px Tahoma !important; color:#FFFFFF;background-color:transparent;
border-style:none none none solid; border-width:0px 0px 0px 4px; 
border-color:#000000 #000000 #000000 #1276B8;  cursor:pointer;z-index:2}
.AWMST6 tbody {background-color:transparent;}
.AWMSTTD6 {border-style:none;border-width:0px;text-align:left; font:14px Tahoma !important; 
color:#FFFFFF;background-color:transparent;}.AWMSTBG6 {position:absolute;
-moz-border-radius:0px / 0px;left:0px;top:0px;border-style:none none none solid; 
border-width:0px 0px 0px 4px; border-color:#000000 #000000 #000000 #1276B8;
background-color:#1276B8;z-index:auto;}
.AWMSTBG6 tbody {background-color:transparent;}
.AWMSTCBG6 {position:absolute;-moz-border-radius:0px / 0px;line-height:normal;
visibility:inherit;background-color:#1276B8;border-style:none none none solid;
border-width:0px 0px 0px 4px;border-color:#000000 #000000 #000000 #1276B8;z-index:2} 
@media print {.AWMSTCBG6{display:none}}
.AWMST7 {position:absolute;-moz-border-radius:0px / 0px;width:100%;visibility:inherit;
text-align:left; font:14px Tahoma !important; color:#E7C7A3;background-color:transparent;
border-style:none none none solid; border-width:0px 0px 0px 4px; 
border-color:#000000 #000000 #000000 #E7C7A3;  cursor:pointer;z-index:2}
.AWMST7 tbody {background-color:transparent;}
.AWMSTTD7 {border-style:none;border-width:0px;text-align:left; font:14px Tahoma !important; 
color:#E7C7A3;background-color:transparent;}
.AWMSTBG7 {position:absolute;-moz-border-radius:0px / 0px;left:0px;top:0px;
border-style:none none none solid; border-width:0px 0px 0px 4px; 
border-color:#000000 #000000 #000000 #E7C7A3;background-color:#212121;z-index:auto;}
.AWMSTBG7 tbody {background-color:transparent;}
.AWMSTCBG7 {position:absolute;-moz-border-radius:0px / 0px;line-height:normal;
visibility:inherit;background-color:#212121;border-style:none none none solid;
border-width:0px 0px 0px 4px;border-color:#000000 #000000 #000000 #E7C7A3;z-index:2} 
@media print {.AWMSTCBG7{display:none}}
.AWMST8 {position:absolute;-moz-border-radius:0px / 0px;width:100%;visibility:inherit;
text-align:left; font:14px Tahoma !important; color:#E7C7A3;background-color:transparent;
border-style:none; border-width:0px; border-color:#000000;  cursor:pointer;z-index:2}
.AWMST8 tbody {background-color:transparent;}
.AWMSTTD8 {border-style:none;border-width:0px;text-align:left; font:14px Tahoma !important; 
color:#E7C7A3;background-color:transparent;}
.AWMSTBG8 {position:absolute;-moz-border-radius:0px / 0px;left:0px;top:0px;border-style:none; 
border-width:0px; border-color:#000000;background-color:#212121;z-index:auto;}
.AWMSTBG8 tbody {background-color:transparent;}
.AWMSTCBG8 {position:absolute;-moz-border-radius:0px / 0px;line-height:normal;
visibility:inherit;background-color:#212121;border-style:none;border-width:0px;
border-color:#000000;z-index:2} 
@media print {.AWMSTCBG8{display:none}}
</style>

<div id="AWMEL6" class="AWMSTCBG3 noprint" 
	style="padding: 0px; left: 36.5px; top: 181px; opacity: 1; width: 939px; height: 18px; 
	z-index: 3; visibility: visible;" 
	onmouseover="this.prc.onmouseover();" onmouseout="this.prc.onmouseout();" onclick="void(0);">
	
	<div id="AWMEL6_A" 
	style="border: medium none ; margin: 0px; padding: 0px; overflow: visible; visibility: inherit; 
	position: relative; width: 939px; height: 18px;">
	
	<table id="AWMEL7_0" class="AWMST4" title="" 
		onmouseover="this.pi.onmouseover();return true" onmouseout="this.pi.onmouseout();" 
		onclick="void(0);" 
		style="margin: 0px; padding: 0px; border-collapse: separate; left: 0px; top: 0px; width: 54px; 
		height: 18px;" border="0" cellpadding="0" cellspacing="0" width="100%">
	
		<tbody>
			<tr class="awmTR">
				<td class="AWMSTTD4" 
					style="padding: 0px; vertical-align: middle; font-family: Trebuchet MS ! important; 
					font-style: normal ! important; font-variant: normal ! important; 
					font-weight: bold ! important; font-size: 14px ! important; 
					line-height: normal ! important; font-size-adjust: none ! important; 
					font-stretch: normal ! important; -x-system-font: none ! important; 
					color: rgb(255, 255, 255);">
					
					<nobr>&nbsp;&nbsp;Home &nbsp;</nobr>
				</td>
			</tr>
		</tbody>
	</table>
	
	<table id="AWMEL7_1" class="AWMST5" title="" 
		onmouseover="this.pi.onmouseover();return true" onmouseout="this.pi.onmouseout();" 
		onclick="void(0);" style="margin: 0px; padding: 0px; visibility: hidden; 
		border-collapse: separate; left: 0px; top: 0px; width: 54px; height: 18px;" 
		border="0" cellpadding="0" cellspacing="0" width="100%">
		
		<tbody>
			<tr class="awmTR">
				<td class="AWMSTTD5" style="padding: 0px; vertical-align: middle; 
					font-family: Trebuchet MS ! important; font-style: normal ! important; 
					font-variant: normal ! important; font-weight: bold ! important; 
					font-size: 14px ! important; line-height: normal ! important; 
					font-size-adjust: none ! important; font-stretch: normal ! important; 
					-x-system-font: none ! important; color: rgb(231, 199, 163);">
				
					<nobr>&nbsp;&nbsp;Home &nbsp;</nobr>
				</td>
			</tr>
		</tbody>
	</table>
	
	<table id="AWMEL7_2" class="AWMST5" title="" onmouseover="this.pi.onmouseover();return true" 
		onmouseout="this.pi.onmouseout();" onclick="void(0);" 
		style="margin: 0px; padding: 0px; visibility: hidden; border-collapse: separate; 
		left: 0px; top: 0px; width: 54px; height: 18px;" 
		border="0" cellpadding="0" cellspacing="0" width="100%">
		
		<tbody>
			<tr class="awmTR">
				<td class="AWMSTTD5" 
					style="padding: 0px; vertical-align: middle; 
					font-family: Trebuchet MS ! important; font-style: normal ! important; 
					font-variant: normal ! important; font-weight: bold ! important; 
					font-size: 14px ! important; line-height: normal ! important; 
					font-size-adjust: none ! important; font-stretch: normal ! important; 
					-x-system-font: none ! important; color: rgb(231, 199, 163);">
					
					<nobr>&nbsp;&nbsp;Home &nbsp;</nobr>
				</td>
			</tr>
		</tbody>
	</table>
	
	<table class="AWMSTBG4" 
		style="margin: 0px; padding: 0px; border-collapse: separate; left: 0px; top: 0px; 
		width: 54px; height: 18px;" id="AWMEL7_0a" 
		border="0" cellpadding="0" cellspacing="0">
		
		<tbody>
			<tr class="awmTR">
				<td style="border: medium none ; padding: 0px; font-size: 0px ! important; 
				background-color: transparent;">
					<img style="margin: 0px;" 
						src="http://www.fortherestless.com/tours/2010/awmdata/dot.gif" 
						border="0" height="1" width="1">
				</td>
			</tr>
		</tbody>
	</table>
	
	<table class="AWMSTBG5" 

... enz.
... enz.
<!-- ******** einde code menu 1 ******** -->

Hmm. Ik word hier een beetje, tja, hoe zal ik het zeggen, eh ja, "rusteloos" is hier wel het goede woord voor.

- En nu heb ik nog wel netjes ingesprongen, want in de code staat alles in één regel achter elkaar.

=====
Nu de vraag nog!
Op het laatst hierboven zie je een oproep staan voor een image:

HTML:

<img style="margin: 0px;" border="0" height="1" width="1" 
   src="http://www.fortherestless.com/tours/2010/awmdata/dot.gif">

Dat img zie je terugkomen bij elk menu-item ("ga na"

).
Maar: dat image bestaat niet, kijk maar:

www.fortherestless.com/tours/2010/awmdata/dot.gif

En wat weten we dat IE doet, als het een niet-bestaand img tegenkomt? Juist, IE maakt daarvan een vierkantje met een rood kruisje er in ... als er ruimte genoeg is. Als er geen ruimte genoeg is, wordt dat waarschijnlijk ingekrompen.
Even kijken:

www.developerscorner.nl/csshunter/tests/img-no-img.htm

Ja, daar is de dader!
In IE zien we:

En die heeft een treffende gelijkenis.

=====
Nu de oplossing:

Om uit te vissen hoe dat script die niet bestaande dot er in zet, lijkt me zoeken naar een speld in een hooiberg.
Het makkelijkst kom je er van af, door een transparant gifje van 1px*1px te maken, dat de naam "dot.gif" te geven, en het te uploaden naar de map "www.fortherestless.com/tours/2010/awmdata/"

Met vriendelijke groet,
CSShunter
___________
PS: Die hele brok <style> hoort niet in de <body> thuis, maar in het <head>...
PS-2: En er zitten nog meer foutjes in de html, zegt de validator...

nessler · 22 jun 2011

wow, dat ga ik proberen.
Hopelijk verdwijnt dan ook die witte rand en het embossed gedoe.

Ik wou dat ik kon zeggen dat ik dat menu zelf geschreven heb,
echter dat deed all web menus software voor mij dus....

Indertijd, enkele jaren geleden toen ik begon met websites, was ik nog niet goed op de hoogte en bijgevolg is die hele troep met code overal ingeslopen.
Met als gevolg dus dat veel van mijn pagina's met junk zitten en probleempjes geven, toch zeker in IE.

Ik ben gisteren begonnen met het schrijven van een externe header, en alles geleidelijk omzetten in php. Een titanenwerk, maar het zal lonen, hopelijk !

nessler · 22 jun 2011

wel gek, bij mijn bron zie ik dit staan

Code:

<!-- Niet verplaatsen! Dit blijft achter Body staan--> 
<!-- ******** BEGIN CODE VOOR menu ******** --> 
<span id='xawmMenuPathImg-menu' style='position:absolute;top:-50px'> 
<img name='awmMenuPathImg-menu' id='awmMenuPathImg-menu' src='http://www.fortherestless.com/awmmenupath.gif' alt=''></span> 
<script type='text/javascript'>var MenuLinkedBy='AllWebMenus [2]', awmBN='GN'; awmAltUrl='';</script> 
<script charset='UTF-8' src='http://www.fortherestless.com/numenu.js' language='JavaScript1.2' type='text/javascript'></script> 
<script type='text/javascript'>awmBuildMenu();</script> 
<!-- ******** einde code menu 1 ******** -->

<div id="container" style="width: 980px">

<table cellpadding="0" cellspacing="0" style="width: 980px">
	<tr>
		<td id=awmAnchor-menu2 width=742 class="td1" style="height: 19px"></td>
	</tr>
	<tr>
		<td class="td2" style="text-align: center; height: 151px;">
		<img height="151" src="http://www.fortherestless.com/logos/rotate.php" width="980" /></td>
	</tr>

die link naar de dot.gif staat in alle geval niet in de pagina vermeld.
die tekst die jij gaf komt vast en zeker rechtstreeks uit 1 van de javascripts die gebruikt worden.

En dat zijn er een stuk of 7 dus ik zal maar alvast beginnen zoeken....

nessler · 22 jun 2011

het is opgelost, bedankt !
(door dat gifje er te plaatsen waar nodig)

Javescript menu vertoont rariteiten

nessler

Gebruiker

csshunter

Meubilair

nessler

Gebruiker

nessler

Gebruiker

nessler

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy