[CSS] DIV + IFRAME probleempje

[1st_Ro]

Hoi,

Ik heb een klein probleempje met een drop down menuutje die ik heb gemaakt.
Ik heb een tabel gebruikt voor de layout (slecht, I know ) en daarin zit een cel waarin het menu zit (horizontaal menu). Onder dit menu zit nog een tabelcel met een iframe erin. Het menu bestaat uit DIVs die visible en hidden worden (redelijk vast concept lijkt me).

Het gekke is dat als je dus het menuutje openklapt en op dat submenuutje gaat staan en er met je muis vanaf gaat (en het onmouseout event handel ik natuurlijk af met een functie om dat submenuutje te sluiten) dat het menuutje in Mozilla, Firefox en Safari blijft staan, terwijl hij in IE gewoon netjes sluit.

Ik ben dus op onderzoek uitgegaan, en de schuldige is dus de iframe. Als ik deze namelijk weghaal, dan doet het menuutje het helemaal zoals het hoort in alle browsers die ik hier heb.

Blijkbaar zorgt de iframe er voor dat de onmouseout handler niet getriggerd wordt, want als je met je muis de tabelcel verlaat waar de iframe instaat, dan gaat het submenuutje wel uit.

Ik heb overigens de search geprobeerd, maar die ligt er nu even uit. Google geeft ook weinig terug. Ik ben goed bekend met CSS, maar dit ging mijn petje net even te boven

Iemand ideeën hoe ik dit het beste op kan lossen ?

[André]

Zonder relevante code gezien te hebben kan ik hier weinig zinnigs over zeggen. Heb je iets online staan?

[1st_Ro]

Dat wel, maar aangezien om een klant gaat (en een grote ook nog), is het denk ik niet wijs om dat weg te geven.

Ik zal even de stukken code geven waar het om gaat:
Sorry voor het versjteren van de layout !

HTML - voorbeeld van een td die een knop + submenu bevat:

code:

      <td class="nav">
        <div id="jewerk" class="subnav" onmouseover="StopTimer();" onmouseout="StartTimer();">
          <div class="subnavitem" onmouseover="this.className='subnavitemover';" onmouseout="this.className='subnavitem';" onclick="top.content.location='bestandsnaam.html'">je collega's</div>
          <div class="subnavitem" onmouseover="this.className='subnavitemover';" onmouseout="this.className='subnavitem';" onclick="top.content.location='html/body_werkgebieden.html'">werkgebieden</div>
        </div>
        [img]"images/btn_jewerk.gif"[/img]</td>

CSS - bijbehorende CSS van bovenstaand stukje:

code:

div.subnav {
    position: absolute;
    width: 150px; 
    margin-top: 21px; 
    padding: 5px 0px;
    background-color: #FF9900; 
    border-top: 1px solid #FFCC80;
    border-left: 1px solid #FFCC80;
    border-right: 1px solid #7F4C00;
    border-bottom: 1px solid #7F4C00; 
    z-index: 99;
    visibility: hidden;
}

HTML - tabelcel met de iframe (staat dus direct onder de tabelcellen met de menuknoppen) :

code:

      <td colspan="5"><iframe src="home.php?img=<? echo $img; ?>" style="width:418px; height: 365px; border: 0px;" name="content" frameborder="0"></iframe></td>

Dit is dus ook waar de content inkomt.
CSS staat daar dus ook inline, het is nog niet final.

De javascript voor het menuutje lijkt me niet relevant, omdat dat gewoon werkt.

Mocht je nog meer details weten, just let me know.

Mailen kan ook, als je/jullie dat makkelijk vindt/vinden

[ Voor 32% gewijzigd door 1st_Ro op 30-07-2004 09:21 ]

[André]

Het enige wat ik nu kan bedenk dat het in de StartTimer() functie niet helemaal goed gaat

[1st_Ro]

André, wacht maar, ik mail je even de directe link (dat ga ik niet zomaar hier neerzetten, dat snap je ook wel )

[BtM909]

1st_Ro schreef op 30 juli 2004 @ 09:28:
André, wacht maar, ik mail je even de directe link (dat ga ik niet zomaar hier neerzetten, dat snap je ook wel )

Nee, dat snap ik niet... Nu kan niemand (behalve André) er wat mee!

[André]

Als je de functie StartTimer eens aanpast naar:

JavaScript:

function StartTimer()
{
  timerID = setTimeout('HideMenu(' + currentimage + ',' + currentmenu + ')', 250);
}

[1st_Ro]

BtM909,

haha, tiz niet persoonlijk bedoeld hoor
Het is gewoon een hele grote klant (verzekeringsmaatschappij), alhoewel ik moet toegeven dat het een update is voor een bestaande site (content blijft toch hetzelfde)
Dus wat dat betreft loop ik weinig risico ... toch?

*twijfelt*

Ik kan het er nog altijd uiteditten

http://cz.zwiers.nl/index.php (met iframe, werkt in IE, niet in Mozilla, Safari)
http://cz.zwiers.nl/index2.php (zonder iframe, werkt overal)

[1st_Ro]

André schreef op 30 juli 2004 @ 09:41:
Als je de functie StartTimer eens aanpast naar:

JavaScript:

function StartTimer()
{
  timerID = setTimeout('HideMenu(' + currentimage + ',' + currentmenu + ')', 250);
}

Dan werkt ie helemaal niet meer

[André]

1st_Ro schreef op 30 juli 2004 @ 09:46:
[...]


Dan werkt ie helemaal niet meer

Was ook meer een eerste ingeving, ik heb nu geen FF dus kan niet echt testen. Krijg je ook foutmeldingen in je JS console?

[1st_Ro]

Nope. Javascript is helemaal correct.
Zoals ik in mijn beginpost ook vermeldde: als ik die iframe weghaal, werkt het menuutje dus ook in Mozilla, FF en Safari. Dus het Javascript is helemaal clean.

Dus eigenlijk moet ik iets hebben om die iframe naar achter te duwen zodat ie de onmouseout event meepakt. (hmmm, misschien in een DIV met z-index zetten? even proberen)

[P_de_B]

Hier FF0.9 werkt het gewoon goed (index2.php dan, de index.php zet het submenu helemaal verkeerd neer)

[1st_Ro]

P_de_B, index2 werkt dus omdat die iframe weg is ...
Het raar positioneren heb ik soms ook. Na verversen werkt ie wel goed bij mij... erg apart.

[P_de_B]

1st_Ro schreef op 30 juli 2004 @ 09:53:
P_de_B, index2 werkt dus omdat die iframe weg is ...
Het raar positioneren heb ik soms ook. Na verversen werkt ie wel goed bij mij... erg apart.

sorry, ben nog niet helemaal wakker

[ Voor 11% gewijzigd door P_de_B op 30-07-2004 09:58 ]

[MBV]

Ik denk dat je dit als bug mag aanmelden op bugzilla (eerst zoeken natuurlijk). ALs hij het zonder iframe prima doet, en met niet meer, dan houdt hij zich niet aan de standaard, toch?

offtopic:
wat heb je precies weggehaald? ik zie nog steeds een banner van CZ hoor Met zoiets zou ik een minimale testcase maken, van een pagina met bijna geen opmaak, 2 menu's met zinloze tekst, en een iframe met lorem ipsum tekst ofzo. Dan weet je zeker dat het geen combinatie van factoren is

edit:
en nu ga je CZ.nl wel firebird-compatible maken? er zitten 3 zwaar storende CSS bugs in namelijk

[ Voor 58% gewijzigd door MBV op 30-07-2004 10:02 ]

[1st_Ro]

MBV,

Dat vermoed ik dus ook. Ik blijf het een aparte bug vinden ... ik ga inderdaad even Bugzilla afspeuren.

Ik ga alleen nog even proberen of z-indexen misschien nog werkt en dan geef ik het voorlopig even op Z-index werkt dus ook niet .... Dan maar online gooien met een bugje erin. Het zij zo.

offtopic:
Nou ja, het is wel opvallend dat als ik de iframe weghaal dat alles weer werkt, vind je ook niet ? En aangezien ik daar amper CSS op gebruik (alleen breedte en hoogte) vind ik het gewoon raar. Ik ga zo anders inderdaad even een testcase maken, misschien dat ik het nog vind. Het is ook niet kritiek, dus dat scheelt.

Ik maak er verdorie gewoon een 'feature' van

Ik heb overigens www.cz.nl niet gebouwd ... da's een andere partij namelijk. Wij doen alleen de wervingscampagnes en de jobsite van CZ

[ Voor 59% gewijzigd door 1st_Ro op 30-07-2004 10:10 ]

[MBV]

offtopic:
ga ze dan eens snel uitleggen dat ze iets verkeerd doen moet ik hem eerst in de mozilla-blacklist zetten?

[1st_Ro]

offtopic:
MBV, doe maar! Wij hebben het overigens ook al tegen CZ gezegd en die zouden het opnemen met de betreffende partij. Ik betwijfel of er iets aan gedaan wordt, maar die blacklist is wel melig.

Ontopic:

Ik vond bij Bugzilla deze: http://bugzilla.mozilla.org/show_bug.cgi?id=125386

Dit euvel gebeurt dus ook bij een iframe (getest), dus ik vermoed dat het probleem omvangrijker is dan alleen mijn deel.

[ Voor 34% gewijzigd door 1st_Ro op 30-07-2004 10:31 ]