[CSS] Dropdown fallback in IE6- zonder JS

[Bozozo]

Ik ben voor de lol een javascript dropdown menu aan het maken. Als javascript is uitgeschakeld, dan verander ik de CSS (binnen <noscript> tags) naar de normale Suckerfish CSS (dwz :hover op list items). Die 'normale' suckerfish menu's doen het niet in IE6 en lager zonder javascript. De mooiste oplossing lijkt mij om het submenu van het huidige main item weer te geven, als horizontale menubalk onder de hoofdmenubalk.

Het probleem is de uitlijning van die horizontale menu balk. Die kan ik niet zomaar laten beginnen op dezelfde horizontale positie, want dan passen in sommige gevallen niet alle items op één regel. De balk moet dus beginnen op de horizontale positie van het hoofdmenu. Dat zou met 'left: 0' nog wel lukken als de pagina links was uitgelijnd, maar bij een pagina in een center wrapper ziet het er niet uit.

Heeft iemand enig idee hoe ik die menubalk kan krijgen waar ik hem wil hebben? Dit lijkt me een standaard probleem van Suckerfish, maar met Google vind ik niet veel.

Testpagina's:
Gewone pagina
Aangepaste pagina die het gedrag van IE6 en lager zonder javascript nabootst

[SchizoDuckie]

Mijn tip:
Lekker laten zoals het is en je niet te druk maken over de situaties die soms kunnen optreden als * insert zon/maanstand conditie *
Mensen met een ouwe brakke IE6 krijgen toch volgende maand gratis IE7 en IE6 is het imo niet waard om je hoofd over te breken (ik weet niet of je je uren kan declareren? )

[ Voor 18% gewijzigd door SchizoDuckie op 21-01-2008 15:37 ]

[Bozozo]

....en fixed

Cascading Stylesheet:

<!--[if lte IE 7]>
<style type="text/css">
  ul#nav li#current ul {
    margin-left: 50%;    
    left: -450px;
    width: 898px;
  }
  ul#nav li#current ul li {
    display: inline;
  }
  ul#nav li#current ul li a {
    display: inline;
  }
</style>
<![endif]-->

Voor de geïnteresseerde: de dropdown van het "current" item (serverside meegeven) wordt horizontaal op de helft van de pagina gezet (margin-left 50%) en vervolgens de helft van de paginabreedte (900px) naar links getrokken (met left: -450px). Hierbij ga ik ervan uit dat je dropdown absoluut is gepositioneerd, omdat je suckerfish gebruikt. De breedte van de dropdown wordt ingesteld op de breedte van de pagina (met een correctie als je borders gebruikt, zoals in mijn geval). De display: inline regeltjes op de dropdown list items en anchors zetten de links vervolgens achter elkaar ipv onder elkaar.

[ Voor 56% gewijzigd door Bozozo op 21-01-2008 19:36 . Reden: code meer barebone gemaakt ]

[f.v.b]

Dit was ook heel goed op te lossen met een 'position: relative;' op de div#centercontainer. Zodra je elementen absoluut wilt positioneren ten opzichte van iets anders dan de body, moet je op het juiste parent element position: relative zetten.

[Bozozo]

Je hebt helemaal gelijk. Jouw manier is zelfs beter omdat hij ook werkt op containers die niet gecentreerd zijn, zonder verder in de code te moeten rommelen. Tnx!