Wazig menuprobleem

[Verwijderd]

Hallo,

Voor mijn werk ben ik bezig om voor een overheidsinstantie een menu te maken in css en xhtml strict. Het menu is opzich netjes gestyled. (in IE7 en FireFox) echter zijn er twee problemen waar ik helaas niet uitkom.

Het ene probleem zit bij IE7. Het menu wanneer dit is uitgeklapt valt dit over het tweede menu wat onder het hoofdmenu zit. (zie afbeelding)



Ik ben hier al het hele weekend bezig, maar ik zie de fout eigenlijk niet zitten. Diverse sites (waaronder deze uiteraard) al afgezocht naar dergelijke problemen, maar heb helaas nog niets gevonden wat als oplossing voor mijn probleem kan dienen. Daarom hoop ik dat jullie me hiermee kunnen helpen. Zouden jullie m'n code eens willen checken en hopelijk zien jullie het foutje waar ik nu al 5 dagen overheen kijk!! Alvast dank voor de moeite.

Lex

css code:

Cascading Stylesheet:

#hoofdmenu {
    list-style: none;
    margin: 0 5px 0 0;
    height: 100%;
}
#hoofdmenu li {
    border-bottom: 1px solid #b8c3df;
}
#hoofdmenu #bThema a:link, #hoofdmenu #bThema a:visited {
    width: 205px;
    height: 55px;
    overflow: hidden;
    background: url(../images/button-themas.gif) no-repeat 0 0;
    text-indent: -99999px;
    display: block;
}
#hoofdmenu #bThema a:hover {
    background: url(../images/button-themas.gif) no-repeat 0 -55px;
}
#hoofdmenu #bThema a:active {
    background: url(../images/button-themas.gif) no-repeat 0 -110px;
}
#hoofdmenu #bBestuur a:link, #hoofdmenu #bBestuur a:visited {
    width: 205px;
    height: 55px;
    overflow: hidden;
    background: url(../images/button-bestuurlijk.gif) no-repeat 0 0;
    text-indent: -99999px;
    display: block;
}
#hoofdmenu #bBestuur a:hover {
    background: url(../images/button-bestuurlijk.gif) no-repeat 0 -55px;
}
#hoofdmenu #bBestuur a:active {
    background: url(../images/button-bestuurlijk.gif) no-repeat 0 -110px;
}
#hoofdmenu #bProducten a:link, #hoofdmenu #bProducten a:visited {
    width: 205px;
    height: 55px;
    overflow: hidden;
    background: url(../images/button-producten.gif) no-repeat 0 0;
    text-indent: -99999px;
    display: block;
}
#hoofdmenu #bProducten a:hover {
    background: url(../images/button-producten.gif) no-repeat 0 -55px;
}
#hoofdmenu #bProducten a:active {
    background: url(../images/button-producten.gif) no-repeat 0 -110px;
}
#hoofdmenu #bZeeland a:link, #hoofdmenu #bZeeland a:visited {
    width: 205px;
    height: 55px;
    overflow: hidden;
    background: url(../images/button-zeeland.gif) no-repeat 0 0;
    text-indent: -99999px;
    display: block;
}
#hoofdmenu #bZeeland a:hover {
    background: url(../images/button-zeeland.gif) no-repeat 0 -55px;
}
#hoofdmenu #bZeeland a:active {
    background: url(../images/button-zeeland.gif) no-repeat 0 -110px;
}
#hoofdmenu #bNieuws a:link, #hoofdmenu #bNieuws a:visited {
    width: 205px;
    height: 55px;
    overflow: hidden;
    background: url(../images/button-nieuws.gif) no-repeat 0 0;
    text-indent: -99999px;
    display: block;
}
#hoofdmenu #bNieuws a:hover {
    background: url(../images/button-nieuws.gif) no-repeat 0 -55px;
}
#hoofdmenu #bNieuws a:active {
    background: url(../images/button-nieuws.gif) no-repeat 0 -110px;
}
#container #content #nav #hoofdmenu li ul.submenu {
    list-style: none;
}
#container #content #nav #hoofdmenu li ul.submenu li {
    border-bottom: 1px solid #c3cce4;
    border-top: 1px solid #fff;
    text-indent: 0;
    margin: 0;
}
#container #content #nav #hoofdmenu li ul.submenu li a:link, 
#container #content #nav #hoofdmenu li ul.submenu li a:visited {
    background-image: url(none);
    background-color: #e7ebf5;
    width: 185px;
    height: 21px;
    text-indent: 0px;
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #576fb2;
    padding: 8px 0 0 20px;
    text-decoration: none;
}
#container #content #nav #hoofdmenu li ul.submenu li a:hover,
#container #content #nav #hoofdmenu li ul.submenu li a:active {
    background-color:#4561ab;
    color: #fff;
}
#container #content #nav #hoofdmenu li ul.submenu2 {
    list-style: none;
}
#container #content #nav #hoofdmenu li ul.submenu2 li {
    border-bottom: 1px solid #c7cfe6;
    border-top: none;
    margin: 0;
}
#container #content #nav #hoofdmenu li ul.submenu2 li a:link, 
#container #content #nav #hoofdmenu li ul.submenu2 li a:visited {
    background: #fff url(../images/menustreep.gif) repeat-y 0 0;
    color: #4561ab;
    font: bold 12px Arial, Verdana, sans-serif;
    height: 18px;
    padding: 4px 0 0 30px;
    width: 175px;   
}
#container #content #nav #hoofdmenu li ul.submenu2 li a:hover,
#container #content #nav #hoofdmenu li ul.submenu2 li a:active {
    background-color: #ebeef6;
}
#container #content #nav #hoofdmenu li ul.submenu3 {
    list-style: none;
    margin: 0 0 0 16px;
    border-left: 1px solid #8799c9;
}
#container #content #nav #hoofdmenu li ul.submenu3 li {
    border: none;
}
#container #content #nav #hoofdmenu li ul.submenu3 li a:link, 
#container #content #nav #hoofdmenu li ul.submenu3 li a:visited {
    background: url(../images/streep-blauw.gif) no-repeat 0px 8px;
    padding: 2px 0 0 15px;
    font: bold 11px Tahoma, Arial, Verdana, sans-serif;
}
#container #content #nav #hoofdmenu li ul.submenu3 li a:hover,
#container #content #nav #hoofdmenu li ul.submenu3 li a:active {
    text-decoration: underline;
}
#container #content #nav #hoofdmenu li ul.submenu4 {
    list-style: none;
}
#container #content #nav #hoofdmenu li ul.submenu4 li a:link, 
#container #content #nav #hoofdmenu li ul.submenu4 li a:visited {
    background-image: none;
    font: normal 11px Tahoma, Arial, Verdana, sans-serif;
    color: #20419b;
    text-decoration: none;
    padding: 1px 0 1px 25px;
}
#container #content #nav #hoofdmenu li ul.submenu4 li a:hover,
#container #content #nav #hoofdmenu li ul.submenu4 li a:active {
    color: #b70b4d;
    font-weight: bold;
    text-decoration: none;
}
#container #content #nav #hoofdmenu li ul.submenu5 {
    list-style: none;
}
#container #content #nav #hoofdmenu li ul.submenu5 li a:link, 
#container #content #nav #hoofdmenu li ul.submenu5 li a:visited {
    font: normal 10px Tahoma, Arial, Verdana, sans-serif;
    text-decoration: underline;
    color: #b70b4d;
    padding: 1px 0 1px 32px;
}
#container #content #nav #hoofdmenu li ul.submenu5 li a:hover,
#container #content #nav #hoofdmenu li ul.submenu5 li a:active {
    background: url(../images/rodepijl.gif) no-repeat 32px 5px;
    font: bold 10px Tahoma, Arial, Verdana, sans-serif;
    color: #b70b4d;
    text-decoration: none;
    padding: 1px 0 1px 40px;
}
#nav #extraMenu {
    margin: 15px 0 0 0;
}
#nav #extraMenu .kopEXTRA {
    background: #9dacd3 url(../images/pijl-extramenu.gif) no-repeat 14px 14px;
    width: 175px;
    height: 24px;
    font: bold 14px Arial, Verdana, sans-serif;
    padding: 8px 0 0 30px;
    color: #c5d0ed;
}
#nav #extraMenu li {
    font: normal 14px Arial, Verdana, sans-serif;
    background: url(../images/blauwerondje.gif) no-repeat 15px 6px;
    list-style: none;
    padding: 0 0 0 28px;
    margin: 7px 0 0 0;
}
#nav #extraMenu li a:link,
#nav #extraMenu li a:visited {
    color: #3755a5;
    text-decoration: none;
}
#nav #extraMenu li a:hover,
#nav #extraMenu li a:active {
    text-decoration: underline;
}

en de html

HTML:

 <div id="nav">         
<ul id="hoofdmenu">
<li id="bThema"><a href="#">Informatie over de Thema's in Zeeland</a>

<ul class="submenu">
<li id=""><a href="#">Kust &amp; water</a></li>
<li id=""><a href="#">Toerisme &amp; Recreatie</a>

<ul class="submenu2">                           
<li id=""><a href="#">Fietsen in Zeeland</a>

<ul class="submenu3">  
<li id=""><a href="#">Fietsknooppuntsystemen</a>

<ul class="submenu4">
 <li id=""><a href="#">Quisque a ante eu</a>

<ul class="submenu5">
<li id=""><a href="#">Maecenas luctus</a></li>
</ul>
</li>

</ul>
</li>

</ul>
</li>

<li id=""><a href="#">Musea</a></li>

</ul></li>

</ul></li>

</ul></li>

</ul>

<div id="extraMenu">
<div class="kopEXTRA">Extra<span class="cChange">menu</span></div>

<ul>
<li><a href="#">Contact</a></li>
</ul>
</div>

[ Voor 130% gewijzigd door Verwijderd op 12-02-2007 11:32 ]

[BtM909]

Ten eerste heeft men vaak een probleem, dus misschien handiger om een beter topic titel te verzinnen Je kan een nieuwe titel voorstellen middels de knop.

Daarnaast kan je je code tussen [code=css][/] en [code=html][/] zetten, wat het iets leesbaarder maakt. Daarnaast vraag ik me af waarom je meer dan 300 regels code post? Even re-produceren wordt lastig aangezien je verwijst naar bestanden die er helemaal niet zijn

Is het niet makkelijker om een deel van je relevante code ergens online te zetten. Door je test-case te versimpelen, is het niet alleen voor ons veel beter te behappen, maar is het voor jou ook wat makkelijker om het probleem te isoleren

[crisp]

Inderdaad, met deze code heb je geen duidelijk voorbeeld waarin het probleem zich manifesteert. Sowieso is het debuggen van dergelijke problemen vaak een kwestie van 'uitkleden'.

Verder heb ik wel wat algemene opmerkingen:
- Gebruik van negatieve text-indent voor image-replacement brengt nogal wat nadelen met zich mee
- id-attributen mogen niet met een cijfer beginnen
- ik meen dat de richtlijnen voor overheids-sites HTML aanraden ipv XHTML. XHTML dien je enkel te gebruiken als daar een gegronde reden voor is en wanneer je precies weet wat de nadelen daarvan zijn

Overigens denk ik dat je in IE6 nog wel tegen iets meer problemen aan gaat lopen dan in IE7 met deze opzet

[ Voor 8% gewijzigd door crisp op 12-02-2007 10:24 ]

[Verwijderd]

Dank je wel voor je reply.

De overheidsinstantie vroeg om xhtml strict en css ipv HTML. Waarom ze dat hebben gedaan is me ook niet duidelijk, maar goed het zij zo.

Ik probeer de code even wat duidelijker op te zetten. Dit is inderdaad wat lastig om te debuggen.

Kun je me precies vertellen waarom een negatieve text-indent problemen oplevert? Dat was me niet bekend eigenlijk. Wellicht is dat meteen wel het probleem. Ga dat meteen even bekijken.

Mocht iemand anders nog input hebben.
Ik houd me aanbevolen. Dank in ieder geval voor het meedenken

[BtM909]

crisp schreef op maandag 12 februari 2007 @ 10:22:

- ik meen dat de richtlijnen voor overheids-sites HTML aanraden ipv XHTML. XHTML dien je enkel te gebruiken als daar een gegronde reden voor is en wanneer je precies weet wat de nadelen daarvan zijn

Niet helemaal: http://webrichtlijnen.ove...tlijnen/alle-richtlijnen/

Ik zie in de markt nog al te vaak dat overheidsinstanties kiezen voor XHTML, omdat dat stricter zou zijn dan HTML

---

Kun je me precies vertellen waarom een negatieve text-indent problemen oplevert? Dat was me niet bekend eigenlijk. Wellicht is dat meteen wel het probleem. Ga dat meteen even bekijken.

Even uit m'n hoofd:
• Problemen met oudere browsers (IE5 uit m'n hoofd)
• Screen readers lezen geen content uit het zicht, maar weer wel teksten met een negatieve marge
• Teksten selecteren krijgt soms / ineens ander gedrag
• Window resizen (handmatig) levert scrollingsproblemen op als je window klein is

[ Voor 32% gewijzigd door BtM909 op 12-02-2007 10:51 ]

[crisp]

BtM909 schreef op maandag 12 februari 2007 @ 10:47:
[...]

Niet helemaal: http://webrichtlijnen.ove...tlijnen/alle-richtlijnen/

Ik zie in de markt nog al te vaak dat overheidsinstanties kiezen voor XHTML, omdat dat stricter zou zijn dan HTML

Dan vergeten ze dit hoofdstukje te lezen denk ik: http://webrichtlijnen.ove.../webstandaarden/xhtml1-0/