IE ødelegger layouten ved onmouseover

[Hyacinth]

Jeg har en side med spørsmål og flere alternative svar, alt som <p>-elementer. Når brukeren klikker på et svar kommer det opp en kommentar under svaret. Jeg løser dette ved en onclick-handler for hvert alternativ, som åpner den tilhørende kommentaren med .style.display = "block". Dessuten setter jeg hvert svaralternativ i fet skrift når musen beveges over, ved:

el.onmouseover = function() {
this.style.fontWeight = "bold";
return false;
}
el.onmouseout = function() {
this.style.fontWeight = "normal";
return false;
}

Dette funker greit. Problemet oppstår når jeg ønsker å lukke en åpen kommentar og vise en annen dersom brukeren klikker på en annen.

I onclick-handleren looper jeg gjennom alle tilhørende kommentarer og skjuler alle (.style.display = "hide" før jeg åpner den som er klikket på. I FF går det bra, men i IE blir det bare kaos, ofte blir de påfølgende svaralternativene stående rett under hverandre uten den normale avstanden <p>-elementet skulle gi, dette kan spre seg nedover flere elementer, noen ganger til neste spørsmål også. Først når jeg muser over disse elementene på nytt retter linjeavstanden seg til normal.

Jeg har lurt på om dette skyldes at pekeren havner over andre elementer når jeg skjuler/viser blokker, og forsøkt å legge in en sperre i onmouseover slik at den ikke fyrer før f.eks. 250ms etter en onclick-event, men det hjelper ikke. Dessuten skjer det både med elementer over og under muspekeren. Har også forsøkt å legge inn

this.cancelBubble = true;
if (this.stopPropagation) this.stopPropagation();

i onmouseover og onmouseout handleren uten at det hjelper heller.

Noen som har vært borte i dette problemet i IE eller som har forslag?

[cy8AZrU2IYTmPsRLBxq02C]

Jeg har en side med spørsmål og flere alternative svar, alt som <p>-elementer. Når brukeren klikker på et svar kommer det opp en kommentar under svaret. Jeg løser dette ved en onclick-handler for hvert alternativ, som åpner den tilhørende kommentaren med .style.display = "block". Dessuten setter jeg hvert svaralternativ i fet skrift når musen beveges over, ved:

<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'>el.onmouseover = function() {

this.style.fontWeight = "bold";

return false;

}

el.onmouseout = function() {

this.style.fontWeight = "normal";

return false;

}</div>

Dette funker greit. Problemet oppstår når jeg ønsker å lukke en åpen kommentar og vise en annen dersom brukeren klikker på en annen.

I onclick-handleren looper jeg gjennom alle tilhørende kommentarer og skjuler alle (.style.display = "hide" før jeg åpner den som er klikket på. I FF går det bra, men i IE blir det bare kaos, ofte blir de påfølgende svaralternativene stående rett under hverandre uten den normale avstanden <p>-elementet skulle gi, dette kan spre seg nedover flere elementer, noen ganger til neste spørsmål også. Først når jeg muser over disse elementene på nytt retter linjeavstanden seg til normal.

Jeg har lurt på om dette skyldes at pekeren havner over andre elementer når jeg skjuler/viser blokker, og forsøkt å legge in en sperre i onmouseover slik at den ikke fyrer før f.eks. 250ms etter en onclick-event, men det hjelper ikke. Dessuten skjer det både med elementer over og under muspekeren. Har også forsøkt å legge inn

<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-space:pre;overflow:auto'>this.cancelBubble = true;

if (this.stopPropagation) this.stopPropagation();</div>

i onmouseover og onmouseout handleren uten at det hjelper heller.

Noen som har vært borte i dette problemet i IE eller som har forslag?

 

 

Vet ikke helt grunnen til det problemet du opplever, men har du vurdert å bruke jquery, prototype eller mootoools til å gjøre samme jobben, de kan ofte utføre det du ønsker å gjøre med kun ett par linjer kode og ett javascript library.

 

http://demos.mootools.net/Accordion

 

Disse fungerer også veldig godt "cross browser"..