Menu reageert anders in Firefox dan in Explorer

Status
Niet open voor verdere reacties.
1

103720

Gebruiker
Lid geworden
18 okt 2006
Berichten
60
Dag beste mensen,

Ik heb onlangs een site gemaakt met daarin een menu'tje wat ik leuk vond. Ik heb mijn site in Firefox gemaakt en ondervond geen problemen. Nadat mijn site gereed was heb ik deze online gezet en niets aan de hand. Dacht ik.

Totdat ik reacties kreeg van mensen die mijn site bezochten. Zij 'klaagden' over het feit dat het menu'tje erg irritant is omdat ze elke keer een 'witte flits' kregen te zien als ze naar eeen andere pagina navigeerden. Dit onstaat waarschijnlijk omdat de pagina opnieuw geladen moet worden.

Maar het rare is dat dit niet gebeurd wanneer ik mijn site in Firefox bekijk. En wat nog meer raar is, is dat wanneer ik het originele menu gebruik in Explorer dit 'probleem' ook niet te zien is. Dus ergens moet ik iets fout hebben gedaan. Echter, mijn kennis is niet zo groot dat ik kan vinden wat ik verkeerd heb gedaan. Dus daarom mijn vraag hier (bij de kenners), kan iemand mij vertellen wat ik verkeerd doe?

Mijn site is te vinden op: www.marcvanzuylen.nl

en het originele menu'tje is te zien op : http://www.dhtmlgoodies.com/scripts/slidedown-menu2/slidedown-menu2.html#

Alvast bedankt voor de moeite.
 
Om te beginnen hoort dit hieronder niet thuis in de body van je site
HTML: 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
Er staat dus een head in de body kan niet.
Weet niet als het daar al mee zal opgelost zijn.
zal nog eens verder kijken.

Waarom 2 stylsheets?
Plaats in deze css hieronder in de body dezelfde kleur als in de tweede.
Code: 
body{
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		font-size:0.8em;
		margin:0px;
		padding:0px;
		height:100%;
		text-align:center;
	}
Of verwijder een van de twee styles of een van de twee body tag.Best is een css!
Mvg
Defietser
 
Laatst bewerkt:
dag defietser,

volgens mij heb ik de aanpassingen die u aangeeft uitgevoerd, maar het probleem is nog steeds aanwezig.
 
Waarschijnlijk gebruik je een plaatje als achtergrond in een donkere kleur?

Dit probleem heb ik vaker gezien; het komt omdat IE de site leeggooit, en daarna pas de achtergrond binnenhaalt en gaat tekenen; door de vertraging zie je eerst een flits wit.

De beste oplossing is om in je CSS een achtergrond kleur op te nemen die een beetje overeen komt met het plaatje dat je gebruikt; deze wordt namelijk direct getekend waardoor je geen witte flits hebt (maar een in die achtergrond kleur, maar die zou niet op moeten vallen)
 
Hoi 103720,
Je diagnose is juist, denk ik: de witte flits in Internet Explorer zal inderdaad te maken hebben met het inladen van een nieuwe pagina.
  • Het is niet vreemd dat dit niet in Firefox e.a. browsers gebeurt (Opera en Safari hebben er bv. ook geen last van): want het is een typische IE-eigenaardigheid.
  • Het is ook niet vreemd dat het niet in het originele menu'tje te zien is: de links in dat menu gaan niet naar een nieuwe pagina, maar blijven op dezelfde pagina. Het zijn "lege links" <a href="#">, wat voor die demo-pagina niet erg is. En als je in IE de "refresh" knop beklikt, flitst het weer als de bliksem.
Verder spelen mee:
  • De flits valt des te meer op, als de pagina een donkere achtergrondkleur heeft; bij jou inderdaad het geval. Bij een witte of lichtgekleurde pagina-background valt het veel minder op.
  • De flits valt des te meer op, als de pagina veel afbeeldingen heeft (waardoor het downloaden van de nieuwe pagina wat langer duurt). Bij jou inderdaad het geval, bv. de pagina Kappa heeft zo'n 300kB aan images.
  • De flits valt des te meer op, als de bezoeker een trage (inbel) internetverbinding heeft.
Het verschijnsel staat bekend onder de naam FOUC = "Flash Of Unstyled Content". Soms wist IE de oude pagina en geeft dan de witte standaard pagina-achtergrond, totdat de nieuwe pagina helemaal geladen is en getoond wordt. Andere browsers wachten altijd netjes tot de nieuwe pagina klaar is, voordat de oude van het scherm gewist wordt.
Zelf pas ik ook wel een IE pagina-overgang toe, die voor de nieuwe pagina een fade-in effect heeft (en tot die tijd de oude laat staan). Dat gaat met een <meta> code die alleen door IE wordt begrepen en de rest geen kwaad doet (en ook valid html is):
HTML: 
<meta http-equiv="Page-Enter" content="blendTrans(Duration=.5)"><!-- anti IE "fouc" -->
Je kan even experimenteren met de waarde van de Duration; het kan ook bv. .75 moeten zijn, of soms ook minder.

O, nu zie ik dat het (vrij uitgebreide) menu-script bij jou rechtstreeks in de pagina staat (of er met php rechtstreeks in gezet wordt).
Dat betekent dat bij elke pagina de script-code in de html opnieuw gedownload en ingelezen moet worden, voordat de rest aan html paginacode gedownload en gerenderd kan worden. Extra vertraging! - Ik zou daarom zeker eerst even proberen of het met een afzonderlijk javascript-bestand (met link ernaartoe in de <head>) minder flitst. Want dan staat de scriptcode voor een nieuwe pagina alvast op de computer van de bezoeker, en wordt daarvandaan gerecycled in plaats van nog eens opgehaald van de site-server.

Succes!
CSShunter

[edit]Aha, de tussenliggende reacties even gemist. - Het toevoegen van een css background kleur (een gemiddelde rode kleur van de afbeelding bg_rood.jpg):
Code: 
body {
   background: #B20010 url(bg_rood.jpg);
   }
laat die kleur alvast zien totdat het plaatje op het scherm gezet wordt (ook al was die afbeelding al eerder gedownload) > en levert dus tijdwinst.
O, en er zitten wat extra css-styles in de <head>, die kunnen opgenomen worden in het stylesheet. > tijdwinst.
Alle beetjes helpen! :)[/edit]
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan