menu 005 werkt niet in Google Chrome

[Gerard]

Ik heb je menu "Statisch horizontaal" Lay-out 005 gebruikt en hem aangepast zodat deze verticaal staat.
Hij werkt perfect in mijn HTML-editor en in de explorer van MS. In Google Chrome echter komen de knoppen recht onder elkaar zonder tussen ruimte.
Hier de CSS code voor het menu

Code: Selecteer alles

ul#menu
{
 width: 115px;
 margin: 10px 0;
 padding: 0 0 0 2px;
 list-style-type: none;
}

ul#menu li
{
 float: left;
}

ul#menu li a
{
 display: block;
 width: 115px;
 height: 35px;
 background-image: url(../images/buttons/button_boots_bl.jpg);
 text-align: right;
 text-decoration: none;
 color: black;
 line-height: 35px; 
 font-size: 13px; 
}

ul#menu a:hover
{
 background-image: url(../images/buttons/button_boots_red.jpg);
 text-decoration: underline;
 color: #CC0000;
}

ul#menu a:visited
{
 color: blue;
}

/*De dode link (de knop van de actieve pagina) geen functies meegeven. en geen handje als cursor.*/
ul#menu a#dode-knop:link, ul#menu a#dode-knop:visited, ul#menu a#dode-knop:hover, ul#menu a#dode-knop:active, ul#menu a#dode-knop:focus
{
 color: #336633;
 background-image: url(../images/buttons/button_boots_red.jpg);
 cursor: default;
}

En hier de HTML code

Code: Selecteer alles

<div id="menulinks">
	<ul id="menu">
		<li><a id="dode-knop" href="#" title="U bevindt zich al op de pagina Home">Home.</a></li>
	</ul>
	<ul id="menu">
		<li><a href="informatie.html" title="Pagina over jubeltenen">Informatie.</a></li>
	</ul>
	<ul id="menu">
		<li><a href="menu-008-zweetvoeten-dl.html" title="Pagina over zweetvoeten">Onze dansen.</a></li>
	</ul>
	<ul id="menu">
		<li><a href="menu-008-loopneuzen-dl.html" title="Pagina over loopneuzen">Agenda.</a></li>
	</ul>
	<ul id="menu">
		<li><a href="menu-008-platvoeten-dl.html" title="Pagina over platvoeten">Clubnieuws.</a></li>
	</ul>
	<ul id="menu">
		<li><a href="menu-008-splithaar-dl.html" title="Pagina over splithaar">Fotoos.</a></li>
	</ul>
	<ul id="menu">
		<li><a href="menu-008-splithaar-dl.html" title="Pagina over splithaar">Links.</a></li>
	</ul>
	<ul id="menu">
		<li><a href="menu-008-splithaar-dl.html" title="Pagina over splithaar">Gastenboek.</a></li>
	</ul>
	</div>

De DIV "menulinks" is als volgt in de CSS opgenomen.

Code: Selecteer alles

div#menulinks
{
 position: fixed;
 top: 8.5em;
 left: 50%;
 bottom: 0;
 width: 125px;
 margin-left: -385px;
 border-top: black solid 1px;
 border-left: black solid 1px;
 border-bottom: 0;
 border-right: 0;
 background: #0f0;
 z-index: 40;
}

Nogmaals in Google zitten alle knoppen tegen elkaar.
Wat doe ik verkeerd.?

Gerard

[Goeroeboeroe]

Hallo Gerard,

Het verbaast me eigenlijk dat het in Internet Explorer wel goed werkt. Elke browser probeert fouten af te vangen, en kennelijk lukt het Internet Explorer hier wel en Google Chrome niet.
Je hebt elke link in een eigen <ul> gezet. Dat is niet nodig, maar zou nog kunnen. Alleen hebben die <ul>'s ook allemaal dezelfde id gekregen. En een id mag je maar één keer gebruiken op een pagina. Als je css aan meerdere elementen wilt koppelen, moet je een class gebruiken.

De float: left bij ul#menu in de css is volgens mij niet nodig.

Ik zou het eens zo proberen:

Code: Selecteer alles

<div id="menulinks">
<ul id="menu">
<li><a id="dode-knop" href="#" title="U bevindt zich al op de pagina Home">Home.</a></li>
<li><a href="informatie.html" title="Pagina over jubeltenen">Informatie.</a></li>
<li><a href="menu-008-zweetvoeten-dl.html" title="Pagina over zweetvoeten">Onze dansen.</a></li>
<li><a href="menu-008-loopneuzen-dl.html" title="Pagina over loopneuzen">Agenda.</a></li>
<li><a href="menu-008-platvoeten-dl.html" title="Pagina over platvoeten">Clubnieuws.</a></li>
<li><a href="menu-008-splithaar-dl.html" title="Pagina over splithaar">Fotoos.</a></li>
<li><a href="menu-008-splithaar-dl.html" title="Pagina over splithaar">Links.</a></li>
<li><a href="menu-008-splithaar-dl.html" title="Pagina over splithaar">Gastenboek.</a></li>
</ul>
</div>

Als je nu aan ul#menu li en/of aan ul#menu li a marges en zo gaat geven, dan zou het in principe in alle browsers goed moeten werken.
Maar zeker weten doe ik het niet. Om iets meer te kunnen zeggen, moet dit eerst worden verbeterd. Met 'n beetje geluk werkt het dan.

Een fout als meerdere dezelfde id's op één pagina kun je trouwens heel makkelijk vinden met behulp van de html-validator op http://validator.w3.org/

Voor css is er een gelijksoortige validator op http://jigsaw.w3.org/css-validator/

Die validators garanderen geen werkende code, maar de meeste fouten tegen de regels vinden ze wel.
Hoop dat het hiermee goed werkt en anders hoor ik het wel.

[Gerard]

Bedankt voor je snelle reactie.

Ik had inderdaad die validator al eens laten lopen over de CSS, en de opmerking over het oneigenlijke gebruik van een id (moet uniek zijn), maar wist niet zo snel dit op te lossen. Heb het nog wel geprobeerd met class maar daar kwam ik niet uit. Ben nogal nieuw op het gebied van CSS, HTML, en PHP.
Heb nu het menu binnen 1 ul geplaatst met 1 id en de marges zo ingesteld dat ze een stukkie uit elkaar staan.
En het werkt. Ook in Chrome. Ik denk dat Chrome gewoon exacte (nette) code wil en dat IE alles slikt wat maar een beetje lijkt op html.
Mooi menutje.

Nu nog even kijken of ik dit menu met een 'include' kan PHP-en. Is me al eens gelukt, dussss

Bedankt voor de hulp.
Gerard

[Goeroeboeroe]

Mooi dat 't werkt.
Een class is eigenlijk hetzelfde als een id, alleen mag je dus bij elke div (of wat dan ook) dezelfde class neerzetten.
<div id="joechei"></div>
<div id="joechei"></div>
mag dus niet, maar

<div class="joechei"></div>
<div class="joechei></div>
mag wel.
Er zijn allerlei redenen om 'n class of id te gebruiken, maar dat voert wat ver hier.
Ik zou je nog aanraden om pas met php te gaan includen als 'n pagina helemaal klaar is. Er wil nog wel 'ns wat misgaan (te veel of te weinig includen). Als de pagina helemaal goed is en je gaat dan pas includen, weet je zeker dat eventuele problemen aan het includen liggen.
Succes!