[HTML,CSS] Problemen in IE: Extra indend, geen mousover

[Verwijderd]

Hallo,

ik heb een uitklap menuutje gemaakt. Wat in Firefox "goed" werkt, alleen in Internet Explorer niet.
Daar krijg ik een extra indend onder het te uit te klappen element en sub items krijgen geen mouseover.

Ik heb mijn html en css gecheckt en die zijn beide valide.

Echter als ik alle html (layout) verder weg laat, dan werkt ie wel.
http://thuis.bytesonline.nl/abi/index2

Maar zo moet het eruit komen te zien:
http://thuis.bytesonline.nl/abi/index
Maar zo werkt het niet, zoals het moet.
Als ik het venster niet gemaximaliseerd heb, dan krijg ik een extra indend onder een te uit te klappen menu. Dan werken de mouseovers wel.
Als ik het venste gemaximaliseerd heb, dan heb ik de extra indend niet, maar ook geen mouseovers van de sub elementen.

Door al mijn frustraties, ben ik ten einde raad. Vooral omdat het in firefox wel werkt en in IE soms.

Door alles weg te halen, werkt het wel. Ik heb geprobeerd stukje bij beetje weg te halen, net zolang totdat het werkte. Maar.... dan heb ik nog alles gestript.

zo ziet één uitklap ding met child eruit:

HTML:

<div class="menuTree">
<div id="m69" class="mtTitle" onclick="menuTreeToggle(this);" onmouseover="mtOver(this);" onmouseout="mtOut(this);">
[img]"images/mtPlus.gif"[/img] TOPPIE</div>
<div id="c69" class="mtContent" style="display: none">
<div class="menuTree">
<div id="m87" class="mtTitle" onclick="menuTreeToggle(this);" onmouseover="mtOver(this);" onmouseout="mtOut(this);">
[img]"images/mtMin.gif"[/img] Testje</div>
<div id="c87" class="mtContent" style="display: block">
<div class="menuTree">
<div id="m89" class="mtTitle" onmouseover="mtOver(this);" onmouseout="mtOut(this);">
[img]"images/mtDot.gif"[/img] supper de sub</div>
</div>
</div>

het javascript voor de mouseovers is dit:

code:

function mtOver(elem) {
    elem.className = "mtTitleOver";
}

function mtOut(elem) {
    elem.className = "mtTitle";
}

Ik hoop dat het allemaal duidelijk is, anders zal ik straks screenshots maken van de "problemen".
Of andere stukjes code erbij zetten.

[Michali]

Waarom gebruik je eigenlijk geen unordered list (ul)? Die erg gemakkelijk te gebruiken voor boomstructuren als deze en heeft een goede nesting mogelijkheid. Ik denk dat als je het zo opbouwt dat je dan al heel wat problemen voorkomt.

[BtM909]

Zal ik maar eens het befaamde lijstje hier neerkwakken?

• Styling nested lists
• Listamatic
• Listamatic2
• CSS Design: Taming Lists
• Listurial

[crisp]

Ik heb mijn html en css gecheckt en die zijn beide valide.

validatie zegt alleen iets over de syntax; het is geen garantie voor goede werking

[Verwijderd]

Ik heb gekeken naar het "lijsten", na aanleiding van jullie posts.
Ik heb ook de voorbeelden doorgenomen. Hierin staan echter geen menu's die kunnen uitklappen of iets.

Ik heb een scriptje gevonden over hovers, maar dat is ook niet wat ik zoek.

Hoe kan ik het dan het beste aanpakken?
Door een onclick toe te voegen aan een "li", die zijn onderliggende "ul" zichtbaar maakt?
Zoja, zou ik dan de class kunnen veranderen zonder tussenkomst van javascript en het opvragen van id's.
Ik heb namelijk ook iets gelezen over een child selector en bij deze "menu structuur" heeft een "li" een "ul" child.

Of is dit niet mogelijk "zonder" javascript?

[Verwijderd]

zonder js gaat niet werken maar iets als:

Cascading Stylesheet:

li.closed ul {
  display: none;
}
li.open ul {
  display: block;
}

en

HTML:

<li class="closed" onclick="this.className = (this.className=='closed')?'open':'closed';">item
  <ul>
    <!-- submenu -->
  </ul>
</li>

en je bent al een heel eind

[ Voor 18% gewijzigd door Verwijderd op 26-07-2005 19:12 ]