/* 

- Voor de IE6 bugoplossing, zie de uitleg in de 'eintepuzzelorig' demo.
- Ik heb je in deze file en bijgehorende html willen laten zien hoe ik dit anders zou opzetten, met minder code.

Een paar opmerkingen om je op weg te helpen. Zie de comments bij de CSS en HTML

-De knoppen kun je beter floaten ipv absoluut posioneren, is veel minder code.
-De wrap is overbodig, je kunt met de bodyclass bepalen waar je bent, bodyclasses aanbrengen doet wordpress voor je. Die body class gebruik je dan om de initiele afbeelding vast te leggen, en ook de actieve knop.
-Je kunt beter met dubbele classes werken, zie de html. De knop active krijgt dus een eigen extra class. Afhankelijk van je wordpress installatie heet die class anders, ik heb m nu active laten heten. Of je maakt van de classes "button1" etc. een id, en de actieve knop krijgt een class active. Al naar gelang wat wordpress al voor je doet.
-Het kan zelfs zonder die class active, dan krijg je wel wat extra css regels. Je koppelt dan de bodyclass aan de knopnaam om het active uiterlijk te bepalen.
-Ik zou de actieve button niet een eigen image geven, maar een achtergrondplaatje met de 3 buttonstates maken (nu heb je alleen de initiele en de hover erin, dan dus ook de active), en dat met background position op de goede plek zetten voor de 3 buttonstates. 
Nog beter zelfs is het om 1 grote afbeelding te maken met alle buttonstates (6x3=18 stuks) voor alle knoppen. Deze verbetering heb ik niet voor je gedaan, vond ik teveel werk.

/* Zet deze standaard 'reset tags' boven elke css file, scheelt heel veel hoofdbrekens. Zie: Eric Meyer:http://meyerweb.com/eric/tools/css/reset/index.html */

/* Start reset tags ========================*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; /*background: transparent;*/ }



ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

:focus { outline: 0; }

table { border-collapse: collapse; border-spacing: 0; }

/* Einde reset tags ========================*/


#menu { padding: 0; list-style: none; display: block; width: 750px; padding-top: 120px; position: relative;/* de ul is hierdoor nu de referentie voor de absolute spans, niet meer de wrap */  }

	#menu li { display: block; float: left; width: 125px; height: 50px;overflow: hidden; }

		#menu a { float: left; display: block; text-indent: -9999px; /*RK: dit is meer gebruikelijk dan -900%*/ width: 125px; height: 50px; overflow: hidden; }/* 9-3 top kan ook 0px zijn. left ook trouwens */
		
		/* zoals gezegd zou ik de 3 states in 1 plaatje zetten per knop en dan alleen de background-position wisselen. Of beter nog alles in 1 plaatje.*/
		#menu .button1 { background: url(../header/knoppen.gif) 0px top no-repeat; }
		#menu .button2 { background: url(../header/knoppen.gif) -125px top no-repeat; }
		#menu .button3 { background: url(../header/knoppen.gif) -250px top no-repeat; }
		#menu .button4 { background: url(../header/knoppen.gif) -375px top no-repeat; }
		#menu .button5 { background: url(../header/knoppen.gif) -500px top no-repeat; }
		#menu .button6 { background: url(../header/knoppen.gif) -625px top no-repeat; }

			#menu a:hover { display: block;width: 125px; height: 50px; }/* 9-3 background position aangepast van center naar -50px*/
			#menu .button1:hover  { background-position: 0px -50px; }
			#menu .button2:hover  { background-position: -125px -50px; }
			#menu .button3:hover  { background-position: -250px -50px; }
			#menu .button4:hover  { background-position: -375px -50px; }
			#menu .button5:hover  { background-position: -500px -50px; }
			#menu .button6:hover  { background-position: -625px -50px; }
			
				#menu a:hover span { display: block; position: absolute; top: 0; left: 0; cursor: pointer; z-index:2; }/* 9-3 z-index toegevoegd */
			#menu a span { display: none; text-indent: -9999px; /*RK: toegevoegd, zodat je tekst in de spans kan zetten en geen lege spans hebt */ width: 750px; height: 120px; background-position: left top; background-repeat: no-repeat; }/* position en repeat toegevoegd */
			
			#menu .button1 span { background-image: url(../header/image1.jpg); }
			#menu .button2 span { background-image: url(../header/image2.jpg); }
			#menu .button3 span { background-image: url(../header/image3.jpg); }/* 9-3 position en repeat naar algemene regel verplaatst */
			#menu .button4 span { background-image: url(../header/image4.jpg); }
			#menu .button5 span { background-image: url(../header/image5.jpg); }
			#menu .button6 span { background-image: url(../header/image6.jpg); }
		
		body #menu a.active, body #menu a.active:hover {background-repeat: no-repeat;}/* 9-3 toegevoegd, 2e deel is voor ie6 bug */		
		
		.pageid_1 #menu a.active { background: url(../header/knoppen.gif) 0px -100px;}/* 9-3 toegevoegd, en .active veranderd in a.active, anders blijft in ie6 de active button op hover niet in de active stand staan. Bottom kan ook -100px zijn. */
		.pageid_2 #menu a.active { background: url(../header/knoppen.gif) -125px -100px;}/* 9-3 idem */
		.pageid_3 #menu a.active { background: url(../header/knoppen.gif) -250px -100px;}/* 9-3 idem */
		.pageid_4 #menu a.active { background: url(../header/knoppen.gif) -375px -100px;}/* 9-3 idem */
		.pageid_5 #menu a.active { background: url(../header/knoppen.gif) -500px -100px;}/* 9-3 idem */
		.pageid_6 #menu a.active { background: url(../header/knoppen.gif) -625px -100px;}/* 9-3 idem */
/* ik zou zelf deze ook in de button img zetten en met backgroundpositioning wisselen tussen de 3 buttonstates */ 

		.pageid_1 #menu a.active:hover { background: url(../header/knoppen.gif) 0px -100px;}/* 9-3 toegevoegd, en .active veranderd in a.active, anders blijft in ie6 de active button op hover niet in de active stand staan. Bottom kan ook -100px zijn. */
		.pageid_2 #menu a.active:hover { background: url(../header/knoppen.gif) -125px -100px;}/* 9-3 idem */
		.pageid_3 #menu a.active:hover { background: url(../header/knoppen.gif) -250px -100px;}/* 9-3 idem */
		.pageid_4 #menu a.active:hover { background: url(../header/knoppen.gif) -375px -100px;}/* 9-3 idem */
		.pageid_5 #menu a.active:hover { background: url(../header/knoppen.gif) -500px -100px;}/* 9-3 idem */
		.pageid_6 #menu a.active:hover { background: url(../header/knoppen.gif) -625px -100px;}/* 9-3 idem */			
		
			body #menu a.active span { display: block; position: absolute; top: 0; left: 0; z-index:1; background-position: left top; background-repeat: no-repeat;} /* voor de initiele pagina */ /* 9-3 z-index toegevoegd, position en repeat toegevoegd */

			.pageid_1 #menu a.active span { background-image: url(../header/image1.jpg); }/* 9-3 position en repeat naar algemene regel verplaatst */
			.pageid_2 #menu a.active span { background-image: url(../header/image2.jpg); }
			.pageid_3 #menu a.active span { background-image: url(../header/image3.jpg); }/* 9-3 toegevoegd */
			.pageid_4 #menu a.active span { background-image: url(../header/image4.jpg); }/* 9-3 toegevoegd */
			.pageid_5 #menu a.active span { background-image: url(../header/image5.jpg); }/* 9-3 toegevoegd */
			.pageid_6 #menu a.active span { background-image: url(../header/image6.jpg); }/* 9-3 toegevoegd */
/* initiele afbeelding voor alle paginas, afh. van je wordpress installatie heten de classes anders, of zijn het id's. Al naar gelang wat je ziet, kun je deze code aanpassen. */