[CSS] display:block wel in chrome en FF, niet in IE7

[Storm90]

Hallo,

Ik ben bezig met mijn blog op www.betterlook.net en nu wil ik een submenu toevoegen aan het menu. Nu heb ik al eens gewerkt met display:none en display:block, dus ik dacht laat ik het gewoon eens proberen.
Nu had ik alles bijna werkend, telkens als ik met mijn muis over bepaalde divs bewoog, kwam het submenu tevoorschijn.., Alleen werkt dit wel alleen in google chrome en Firefox en juist niet in IE7.. IE6 snap ik wel, aangezien daar :hover in de meeste gevallen alleen werkt mbv javascript. Ik heb al op google gezocht maar kan geen juist antwoord vinden. Ik wil het zo hebben, dat als ik straks met mijn muis over de link "foto's" beweeg, dat er dan het submenu tevoorschijn komt.

Dit is mijn css code:

Cascading Stylesheet:

.submenu {
position:absolute;
height:200px;
background:url(images/submenu.png) no-repeat bottom center;
margin-top:200px;
width:900px;
vertical-align:bottom;
bottom:-25;
left:-1;
display:none;

  }
.textsubmenu {
bottom:10;
left:60;
color:#677536;
font-family:"Arial Rounded MT Bold";
position:absolute;
}

.linkfoto {
}


#nav:hover .submenu {
  display:block;
}

En dit mijn html code:

HTML:

  <div id="header">

    <div id="nav">
      <a href="http://<?=$Domein?>/home/">Home</a>&nbsp;&nbsp;
      <a class="linkfoto" href="http://<?=$Domein?>/fotos/14-02-2009/">Foto's</a>&nbsp;&nbsp;
      <a href="http://<?=$Domein?>/gastenboek/">Gastenboek</a>&nbsp;&nbsp;
      <a href="http://<?=$Domein?>/contact/">Contact</a>&nbsp;&nbsp;
      <div class="submenu">
        <div class="textsubmenu">
          Afscheidsfeest | Op naar Barcelona | 14-02-2009
        </div>
      </div>
    </div>
  </div>

Ik snap gewoon niet waarom het weer JUIST niet in IE werkt, in IE7 nog wel... Ik heb al verschillende divs geprobeert maar ik krijg het gewoon niet werkend.

Alvast bedankt,

Erik

[jbdeiman]

@Erik
Als ik ga testen, dan werkt het bij mij ook niet in FF en Chrome (met je bovenstaande code). Als je je menu (en submenu's) goed opbouwt met listitems:

code:

<ul>
  <li>bla</li>
  <li>bla</li>
  <li>bla</li>
  <li>bla
      <ul>
         <li>bla</li>
         <li>bla</li>
      </ul>
   </li>
</ul>

Dan moet de methode zoals jij hem hierboven in je css probeert te gebruiken wel werken: Zie ook hier:

http://www.cssplay.co.uk/menus/dd_valid.html

[Storm90]

Nou, het probleem is namelijk dat ik mijn submenu zo wil hebben:
http://www.betterlook.net/images/test.png
En ik twijfel er een beetje aan of dat mogelijk is met li en ul

[Fuzzillogic]

Storm90 schreef op dinsdag 17 februari 2009 @ 01:02:
Nou, het probleem is namelijk dat ik mijn submenu zo wil hebben:
http://www.betterlook.net/images/test.png
En ik twijfel er een beetje aan of dat mogelijk is met li en ul

Natuurlijk is dat mogelijk. Beide zijn normale block-elements, list-type op none, paddings en margins op 0, en het verschil met een normale div is niet meer te zien.

[Verwijderd]

Storm90 schreef op dinsdag 17 februari 2009 @ 01:02:
Nou, het probleem is namelijk dat ik mijn submenu zo wil hebben:
http://www.betterlook.net/images/test.png [ ... ]

@Eric0: in je afbeelding zie ik dat je gebruikt maakt van Drupal CMS. Ik denk dat ze daar een module voor hebben. Heb je al op de Drupal-site gekeken? Link

Ik ben ervan overtuigd dat deze module je volledig instaat zal stellen met wat CSS aanpassingen het naar je eigen zin te kunnen krijgen. Succes!

[ Voor 1% gewijzigd door Verwijderd op 18-02-2009 20:19 . Reden: Revisit UBB-code ]

[Storm90]

Nee fout:P Klopt dat ik gebruik heb gemaakt van drupal, maar dat was best wel brak dus heb ik maar alle bestanden in de map van drupal, uit de map verwijdert en in dezelfde map mijn eigen site geprogrammeerd... Ik was gewoon te lam om in Dreamweaver mijn site locatie(s) aan te passen... Maar ik heb alles gewoon zelf geprogrammeerd en gephotoshopt, dus weinig zin om naar drupal te gaan.

Reden waarom ik gebruik maakte van drupal:
Er werd verteld dat ik er makkelijk zelf mijn eigen dingen in kon programmeren en ik kon heel gemakkelijk en snel een eigen blog op zetten, er zat haast achter omdat ik binnen 2 dagen naar Barcelona vertrok. Uiteindelijk toch alles zelf gephotoshopt en geprogrammeerd.

[Fuzzillogic]

Even heeel wat anders: het is "Eriks blog", niet "Erik's blog"

Daarnaast: ik ken drupal verder niet, maar een uitgebreid CMS als drupal kun je niet in 2 dagen leren.Daar zul je toch ook enige moeite in moeten steken, zoals met alles dat "niet-standaard" is.

[Storm90]

Oke haha stomme fout

Nou dat is het niet, ik had mijn blog helemaal af en werkend... Maar er kwam best wel veel spam in mijn gastenboek (verkeerde captcha gekozen: simpel sommetje) en alles was in het Engels. Nu is dat voor mij geen probleem, maar aangezien er toch alleen vrienden, familie e.d. op mijn blog komen leek het me gebruiksvriendelijker om alles in het Nederlands weer te geven. Nu zou ik dit misschien kunnen doen door wat aan te passen in drupal, maar het leek me toch beter om tijdelijk drupal online te houden (zodat mensen nog kunnen posten in het gastenboek e.d.) en tussendoor een eigen blog te bouwen. Deze staat nu dus online.