:strip_exif()/u/82097/avater.gif?f=community)
Ik ben met een website bezig waar ik het menu in een soort textballonetje laat verschijnen.
Achter de site zit een CMS, ik weet dus niet hoe groot een menu zal zijn. Elk submenu heeft dus een variabel aantal items.
Het tonen van een bepaald submenu heb ik eenvoudig opgelost door het meegeven van alle DIV's, die allemaal te verbergen (css), behalve het menu wat getoond dient te worden.
Dit gaat allemaal goed. In internet explorer 7, firefox 1.5, 2 en safari werkt het menu probleemloos, maar helaas in firefox 1 en internet explorer 6 loop dit niet helemaal goed:
Zo zo het moeten zijn (en zo is het dan ook in IE7 en ff 2):
Je zou zeggen dat er iets verkeerd is met mijn css, maar als ik de DIV's klaarzet in de html, en dus niet te voorschijn tover met javascript, dan gaat het wel goed.
Ik moet de onderstaande DIV's dus in de oude browsers op een of andere manier wijsmaken dat ze zich moeten aanpassen en een beetje naar beneden of naar boven zouden moeten schuiven.
Dit lukt als volgt:
Dan worden de DIV's wel opnieuw gerendeerd op de juiste plaats, maar dan zie je ze wel even pinken/blinken/flitsen, dus een mooie oplossing vind ik het niet.
Ik zou ook kunnen bereken hoeveel ze juist naar beneden moeten, en dan zoveel pixels in de margin ofzo toevoegen, maar dan gebeurd dat in de browsers waar de pagina goed weergegeven wordt dus ook, wat niet de bedoeling is.
Hoe los ik op?
EDIT: Ohja, een werkende testversie vind je hier
Achter de site zit een CMS, ik weet dus niet hoe groot een menu zal zijn. Elk submenu heeft dus een variabel aantal items.
Het tonen van een bepaald submenu heb ik eenvoudig opgelost door het meegeven van alle DIV's, die allemaal te verbergen (css), behalve het menu wat getoond dient te worden.
Dit gaat allemaal goed. In internet explorer 7, firefox 1.5, 2 en safari werkt het menu probleemloos, maar helaas in firefox 1 en internet explorer 6 loop dit niet helemaal goed:
Zo zo het moeten zijn (en zo is het dan ook in IE7 en ff 2):
Je zou zeggen dat er iets verkeerd is met mijn css, maar als ik de DIV's klaarzet in de html, en dus niet te voorschijn tover met javascript, dan gaat het wel goed.
Ik moet de onderstaande DIV's dus in de oude browsers op een of andere manier wijsmaken dat ze zich moeten aanpassen en een beetje naar beneden of naar boven zouden moeten schuiven.
Dit lukt als volgt:
code:
1
2
3
4
| document.getElementById("links").style.display = 'none';
document.getElementById("links").style.display = 'inline';
document.getElementById("rechts").style.display = 'none';
document.getElementById("rechts").style.display = 'inline'; |
Dan worden de DIV's wel opnieuw gerendeerd op de juiste plaats, maar dan zie je ze wel even pinken/blinken/flitsen, dus een mooie oplossing vind ik het niet.
Ik zou ook kunnen bereken hoeveel ze juist naar beneden moeten, en dan zoveel pixels in de margin ofzo toevoegen, maar dan gebeurd dat in de browsers waar de pagina goed weergegeven wordt dus ook, wat niet de bedoeling is.
Hoe los ik op?
EDIT: Ohja, een werkende testversie vind je hier
/u/44276/got_icon5.png?f=community)
/u/5360/crop65d3c045ca48f_cropped.png?f=community)
:strip_icc():strip_exif()/u/43473/crop5e12eeae6a054_cropped.jpeg?f=community)
:strip_exif()/u/25820/raptorsafari.gif?f=community)
:strip_exif()/u/41306/web_anim.gif?f=community)
) ? Leesbaarheid is dan juist super: IE6 stylesheet, IE7 stylesheet, alles apart voor de browser issues