7 berichten aan het bekijken - 1 tot 7 (van in totaal 7)
  • Q:
    Bijdrager
    Mr.Mark

    Dropdown menu met CSS (IE niet werkende)

    ik heb van A list apart een suckerfish menu handleiding zitten lezen en tegelijk toe te passen op mijn website, maar ik krijg hem in IE niet fatsoenlijk werkende.
    in IE krijg ik namelijk dit te zien als ik met mijn muis over de menuitem ga waar het dropdown menu in komt te zitten:

    en in Firefox krijg ik het wel goed te zien:

    Geblokkeerd
    Anoniem

    Kun je de code van je menu even plaatsen? Misschien dat we kunnen zien of
    je per ongeluk iets verkeerd hebt gedaan ofzo;)

    p.s.:
    Keek net even op je website, en als ik wat inzoom op de tekst dan knalt heel
    je site naar rechts (in safari op 10.4.8). Weet niet of dat de bedoeling was, maar
    ’t leek me even goed om te melden;)

    Bijdrager
    Mr.Mark

    hier is ook gelijk een link naar de desbetreffende pagina: klik!
    oke, dit is dus mijn menu:
    [code:1:549e0139a6]<div id="menuWrapper">
    <ul id="mainMenu">
    <li><a href="#" id="flagDE" class="flagLang">Deutsch</a></li>
    <li><a href="#" id="flagEN" class="flagLang">English</a></li>
    <li><a href="#" id="flagFR" class="flagLang">Fran&ccedil;ais</a></li>
    <li><a href="#" id="btnWelkom">Welkom</a></li>
    <li><a href="#" id="btnVoorz">Voorzieningen</a>
    <ul>
    <li>Campers</li>
    <li>Brasserie de Zachte Gee</li>
    <li>Campingwinkel</li>
    <li>Sanitair &amp; Wasserette</li>
    </ul>
    </li>
    <li><a href="#" id="btnJeugd">Jeugd</a></li>
    <li><a href="#" id="btnTariev">Tarieven</a></li>
    <li><a href="#" id="btnFolderaanv">Folderaanvraag</a></li>
    <li><a href="#" id="btnRoute">Route</a></li>
    <li><a href="#" id="btnFaq">FAQ</a></li>
    </ul>
    </div>[/code:1:549e0139a6]

    en dit is mijn CSS:
    [code:1:549e0139a6]/* Main Menu styles */
    ul {
    margin: 0;
    padding: 0;
    list-style:none;
    }
    li {
    float: left;
    position: relative;
    }
    ul#mainMenu li a {
    display: block;
    height: 34px;
    text-indent: -9999px;
    }
    #mainMenu li a.flagLang {
    width: 23px; height:15px;
    margin: 8px 5px 0 0;
    }
    #mainMenu li a#flagDE {
    background: url(../images/b_flagDE.jpg) no-repeat;
    }
    #mainMenu li a#flagEN {
    background: url(../images/b_flagEN.jpg) no-repeat;
    }
    #mainMenu li a#flagFR {
    background: url(../images/b_flagFR.jpg) no-repeat;
    }
    #mainMenu li a#flagNL {
    background: url(../images/b_flagNL.jpg) no-repeat;
    }
    #mainMenu li a#btnWelkom:hover, #mainMenu li a#btnVoorz:hover, #mainMenu li a#btnJeugd:hover, #mainMenu li a#btnTariev:hover,
    #mainMenu li a#btnFolderaanv:hover, #mainMenu li a#btnRoute:hover, #mainMenu li a#btnFaq:hover {
    background-position: left -34px;
    }
    #mainMenu li a#btnWelkom {
    background: url(../nl/images/b_welkom.jpg) no-repeat left top; width: 95px;
    }
    #mainMenu li a#btnVoorz {
    background: url(../nl/images/b_voorz.jpg) no-repeat left top; width: 137px;
    }
    #mainMenu li a#btnJeugd {
    background: url(../nl/images/b_jeugd.jpg) no-repeat left top; width: 82px;
    }
    #mainMenu li a#btnTariev {
    background: url(../nl/images/b_tariev.jpg) no-repeat left top; width: 103px;
    }
    #mainMenu li a#btnFolderaanv {
    background: url(../nl/images/b_folderaanv.jpg) no-repeat left top; width: 149px;
    }
    #mainMenu li a#btnRoute {
    background: url(../nl/images/b_route.jpg) no-repeat left top; width: 84px;
    }
    #mainMenu li a#btnFaq {
    background: url(../nl/images/b_faq.jpg) no-repeat left top; width: 79px;
    }
    li ul {
    display: none;
    position: absolute;
    top: 34px;
    left: 0;
    }
    li>ul {
    top: auto; left: auto;
    }
    li:hover ul, li.over ul {
    display: block;
    }[/code:1:549e0139a6]

    Bijdrager
    Mr.Mark
    ”joram”

    p.s.:
    Keek net even op je website, en als ik wat inzoom op de tekst dan knalt heel
    je site naar rechts (in safari op 10.4.8). Weet niet of dat de bedoeling was, maar
    ’t leek me even goed om te melden;)

    enne, over welke website heb je het dan? mn ‘lab’ of mijn blog?

    Geblokkeerd
    Anoniem

    [code:1:fd487aea35] <li><a href="#" id="btnVoorz">Voorzieningen</a> [/code:1:fd487aea35]
    moet je dit van maken:
    [code:1:fd487aea35] <li><a href="#" id="btnVoorz">Voorzieningen</a> </li>[/code:1:fd487aea35]
    Je was ‘m vergeten af te sluiten;)

    En ik bedoelde je blog:) Als ik de tekst kleiner maak verdwijnt je menu,
    en maak ik de tekst groter schiet je site naar rechts:)

    p.s.:
    Wat een bak met css trouwens zeg ^^
    Heb je wel eens bij http://css.maxdesign.com.au/listamatic/ gekeken toevallig?
    Daar doen ze dit soort dingen met flink wat minder code. Da’s misschien ook
    gelijk wat makkelijker doorheen te werken mocht je wat willen veranderen;)
    Daar staan trouwens ook nog een heleboel andere leuke menu’s in mocht je
    geïnteresseerd zijn.

    Bijdrager
    Mr.Mark

    tjah, ik weet dat het n bak met CSS is, maar de website is nog volop in aanbouw. dus die CSS wordt misschien nog wel samengevoegd. zo niet, dan zij het zo:P

    ze zijn hiero namelijk nogal bezig met het aantal uren dat je aan een website werkt bezig. en hoe minder uren, hoe beter.

    Bijdrager
    Mr.Mark
    ”joram”

    [code:1:1999489594] <li><a href="#" id="btnVoorz">Voorzieningen</a> [/code:1:1999489594]
    moet je dit van maken:
    [code:1:1999489594] <li><a href="#" id="btnVoorz">Voorzieningen</a> </li>[/code:1:1999489594]
    Je was ‘m vergeten af te sluiten;)

    neej, hoor. dat lijkt ook niet te helpen. nou krijg ik het in FF niet meer werkende en in IE blijft het gewoon hetzelfde.
    op de website van A list apart hebben ze daar ook dezeflde opmaak gebruik als ik.

    ligt het misschien niet aan iets ergens anders in mn CSS?

7 berichten aan het bekijken - 1 tot 7 (van in totaal 7)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.