[JS]onclick -> display:block;

[GoddXX2]

Ik was bezig met me website te maken. Ik heb een menu en als je daar op klikt dan komt er een submenu tevoorschijn, alleen werkt deze niet in IE.

http://www.xs4all.nl/~hach1000/

In Mozilla werkt alles naar behoren alleen IE zit weer te miepen. Als je met IE kijkt dan is het eerste menu uitgeklapt en het tweede menu niet, dit klopt nog, maar in Mozilla kan je die menus in- en uitklappen. wat moet ik aan me code veranderen?

Relevante code:

JavaScript:

<script type="text/javascript">
c1=1
function menucont1() {
    if (c1==0) {
        c1=1
        document.getElementById('menucont1').style.display='block';
    } else {
        c1=0
        document.getElementById('menucont1').style.display='none';
    }
}
c2=0
function menucont2() {
    if (c2==0) {
        c2=1
        document.getElementById('menucont2').style.display='block';
    } else {
        c2=0
        document.getElementById('menucont2').style.display='none';
    }
}
</script>

Cascading Stylesheet:

<style>
    #menucont1 {
    display:block;
    }
    #menucont2 {
    display:none;
    }
</style>

HTML:

<div class="menuitem2" onclick="menucont1()" >Testmenu1</div>
<div id="menucont1">
    <div class="menuitem1">Optie1</div>
    <div class="menuitem1">Optie2</div>
    <div class="menuitem1">Optie3</div>
</div>
<div class="menuitem2" onclick="menucont1()" >Testmenu1</div>
<div id="menucont2">
    <div class="menuitem1">Optie1</div>
    <div class="menuitem1">Optie2</div>
    <div class="menuitem1">Optie3</div>
</div>

[ Voor 17% gewijzigd door GoddXX2 op 21-04-2004 14:22 ]

[André]

Je hoeft niets te veranderen, het werkt precies zoals je wil in IE6.

[GoddXX2]

nu ik even zit te prutsen wel ja, alleen waarom kan ik bij IE alleen op de text klikken en met mozilla er ook naast? Ik klikte er telkens naast, vond het al zo vreemd dat hij het niet deed

[André]

In IE kan ik er ook naast klikken, zelfs tot helemaal aan de rechterkant reageerd hij nog.

[GoddXX2]

Zal wel aan mij liggen dan, hij werkt in ieder geval

[RM-rf]

volgens mij is het op te lossen door

code:

<style>
 #menucont1 {
    display:block;
    width: 100%;  
 }
 #menucont2 {
    display:none;
    width: 100%;  
 }
</style>

te doen, dan is de hele DIV-area in msie5 en 5.5. klikbaar, dit levert echter wel mogelijk een probleem op in mozilla (boxmodel) en msie6 in non-quirk-mode, zodra je ook gebruik maakt van margin en/of padding

[JoeKurr]

RM-rf schreef op 21 april 2004 @ 14:50:

...

dit levert echter wel mogelijk een probleem op in mozilla (boxmodel) en msie6 in non-quirk-mode, zodra je ook gebruik maakt van margin en/of padding

Maar dat kun je weer oplossen door in je stylesheet dit op te nemen:

code:

* { 
  box-sizing      : border-box; 
  -moz-box-sizing : border-box; 
}

Op deze manier gaan IE en Mozilla op dezelfde manier om met borders e.d.

[r0bert]

@RM-rf:
Ik heb altijd geleerd dat het niet nodig is om in de DIVs 100% op te nemen, omdat deze standaard over de hele breedte reiken

[BtM909]

r0bert schreef op 21 april 2004 @ 16:21:
@RM-rf:
Ik heb altijd geleerd dat het niet nodig is om in de DIVs 100% op te nemen, omdat deze standaard over de hele breedte reiken

Dat komt omdat een Div al een blocking-element is

[r0bert]

Ja, ik weet, maar RM-rf geeft als oplossing om de DIV's 100% breedte mee te geven in de CSS (toch?). Lijkt me dus niet nodig, of zie ik dat verkeerd?

[ Voor 6% gewijzigd door r0bert op 21-04-2004 16:43 ]