Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

CSS Menu probleem .. wie weet de oplossing

Anoniem
boelieboelie
4 antwoorden
  • Hallo!

    Ik heb een vraag mbt een css site die ik aan het maken ben. Ik heb een vertikaal menu gemaakt met een UL opbouw in de xhtml. (zoals het hoort)

    [img:92f187927e]http://www.yourpreview.nl/lex_prive/afbeelding.gif[/img:92f187927e]

    In firefox (hoe kan het ook anders) ziet de menu eruit zoals het hoort, maar in IE zit er weer een fijn BUG in. (het extra streepje onder ONZE SERVICE) Ik staar (en zoek) me al twee dagen helemaal blind op dit probleem. Maar zelf zie ik het niet.

    Hopelijk kunnen jullie me helpen? Alle input wordt zeer gewaardeerd.
    Hartelijk dank alvast.

    Lex

    ======== de xhtml code ====================
    [code:1:92f187927e]<ul id="menu">
    <li id="b_home"><a href="#">Home</a></li>
    <li id="b_producten"><a href="#">Onze producten</a></li>
    <ul class="submenu">
    <li id="item2_1"><a href="#">Item 1</a></li>
    <li id="item2_2"><a href="#">Item 2</a></li>
    <li id="item2_3"><a href="#">Item 3</a></li>
    <li id="item2_4"><a href="#">Item 4</a></li>
    </ul>
    <li id="b_service"><a href="#">Onze service</a></li>
    <li id="b_medewerkers"><a href="#">Onze medewerkers</a></li>
    <ul class="submenu">
    <li id="item4_1"><a href="#">Vacatures</a></li>
    <li id="item4_2"><a href="#">Even voorstellen</a></li>
    <li id="item4_3"><a href="#">Item 3</a></li>
    <li id="item4_4"><a href="#">Item 4</a></li>
    </ul>
    <li id="b_nieuws"><a href="#">Nieuws</a></li>
    <li id="b_contact"><a href="#">Contact</a></li>
    <li id="empty">&nbsp;</li>
    </ul>[/code:1:92f187927e]

    ======= einde xhtml code ===============

    en de css die ik tot zover heb ..

    ==========begin css==================

    [code:1:92f187927e]#menu {
    font: normal 1.20em Arial, Verdana sans-serif;
    width: 158px;
    list-style-type: none;
    margin: 29px 0 0 0;
    }

    #menu li {
    padding: 6px 0;
    background: transparent url(../images/line-horizontal.gif) no-repeat top left;
    }

    #menu li a:link,
    #menu li a:visited {
    color: #8c1029;
    text-decoration: none;
    background: transparent url(../images/arrow-normal.gif) no-repeat 2px 3px;
    padding: 0 0 0 14px;
    display: block;
    }

    #menu li a:hover,
    #menu li a:active {
    color: #8c1029;
    font-weight: bold;
    text-decoration: none;
    display: block;
    }

    #container #menu .submenu {
    xbackground: transparent url(../images/line-horizontal.gif) no-repeat top left;
    margin: 0 !important; margin: 6px 0 -6px 0;
    padding: 6px 0 !important; padding: 6px 0;
    }

    #container #menu .submenu li {
    padding: 1px 0 1px 10px;
    list-style-type: none;
    background: none;
    }

    #container #menu .submenu li a:link,
    #container #menu .submenu li a:visited {
    background: url(../images/rode-lijn.gif) no-repeat 6px 8px;
    display: block;
    }

    #container #menu .submenu li a:hover,
    #container #menu .submenu li a:active {
    color: #8c1029;
    font-weight: bold;
    text-decoration: none;
    display: block;
    }

    #container #menu #empty {

    }[/code:1:92f187927e]

    ===========einde css code====================
  • Heb er even vluchtig naar gekeken en volgens mij klopt je HTML niet. Probeer dit eens:[code:1:c1495204e7]<ul id="menu">
    <li id="b_home"><a href="#">Home</a></li>
    <li id="b_producten"><a href="#">Onze producten</a>
    <ul class="submenu">
    <li id="item2_1"><a href="#">Item 1</a></li>
    <li id="item2_2"><a href="#">Item 2</a></li>
    <li id="item2_3"><a href="#">Item 3</a></li>
    <li id="item2_4"><a href="#">Item 4</a></li>
    </ul></li>
    <li id="b_service"><a href="#">Onze service</a></li>
    <li id="b_medewerkers"><a href="#">Onze medewerkers</a>
    <ul class="submenu">
    <li id="item4_1"><a href="#">Vacatures</a></li>
    <li id="item4_2"><a href="#">Even voorstellen</a></li>
    <li id="item4_3"><a href="#">Item 3</a></li>
    <li id="item4_4"><a href="#">Item 4</a></li>
    </ul></li>
    <li id="b_nieuws"><a href="#">Nieuws</a></li>
    <li id="b_contact"><a href="#">Contact</a></li>
    <li id="empty">&nbsp;</li>
    </ul>[/code:1:c1495204e7]Ik heb UL genest in LI ipv in UL.

    Heb je IE ook in standards compliance mode draaien?

    - Bas
  • [quote:469c2e0cf0]standards compliance mode [/quote:469c2e0cf0]

    sorry, maar wat bedoel je hier precies mee?
    als het gaat om de doctype. ik heb xhtml1.1 strict als doctype

    bedankt trouwens voor de snelle respons.

    ga je voorstel zo eens proberen ..
    Lex
  • @BasHamar:

    je voorstel om de XHTML aan te passen heeft helaas geen effect. Het probleem blijft helaas bestaan..

    iemand een andere suggestie?
    Lex

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.