[CSS][IE] Menu op achtergrond - Softwareontwikkeling

donderdag 1 maart 2007 16:19

Acties:

Topicstarter

Op het moment ben ik bezig met het ontwikkelen van een website, gaat allemaal zoals het moet gaan. Alleen ligt IE7 (IE6 nog niet getest) weer eens dwars. Op de website heb ik een CSS dropdown menu gemaakt. In FireFox verschijnt deze netjes in beeld, maar in IE7 komt dit menu op de achtergrond te staan. Achter een Paragraaf. Na een zoektocht hier op het forum en op internet ben ik niet echt verder gekomen. Nu richt ik mijn probleem maar naar jullie toe in de hoop dat jullie een oplossing hebben voor dit bekende/veel komende probleem.

Met de code hieronder is het probleem in IE7 te zien. Mochten jullie nog mee informatie nodig hebben, vraag het gerust.

Cascading Stylesheet:

* {
  margin:                 0;
  padding:                0;
  list-style:             none;
}

#top {
  height:                 193px;
  margin-top:             15px;
  width:                  761px;
}

#menu {
  height:                 76px;
  margin-left:            177px;
  padding-left:           8px;
  margin-top:             53px;
  width:                  576px;
}

#menu li {
  float:                  left;
  font-size:              14px;
  height:                 25px;
  line-height:            15px;
  margin-right:           1px;
  margin-top:             24px;
  padding-top:            8px;
  width:                  70px;
}

#menu li ul {
  display:                none;
}

#menu li:hover ul {
  display:                list-item;
  margin-top:             10px;
}

#menu li ul li {
  margin-top:             0px;
  width:                  150px;
}

#content {
  background-color:       red;
  height:                 472px;
  width:                  545px;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="NL">
  <head>
    <title>Zorgeconomie</title>
    <link rel="stylesheet" type="text/css" title="screen" media="screen" href="skin/screen.css" />
  </head>
  <body>
    <div id="top">
      <h1>Zorgeconomie</h1>
      <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Over ons</a>
          <ul>
            <li><a href="#">Bestuur</a></li>
            <li><a href="#">Comité van aanbeveiling</a></li>
            <li><a href="#">Netwerk van experts</a></li>
            <li><a href="#">Donateurs</a></li>
            <li><a href="#">Samenwerkende partners</a></li>
          </ul>
        </li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <h2>kop</h2>
    <p id="content">a</p>
  </body>
</html>

donderdag 1 maart 2007 16:40

Acties:

Rekcor

Misschien niet echt een oplossing voor je probleem, maar waarom gebruik je niet een van de circa 1.000.000 menu-script op internet?

Zelf gebruik ik al jaren (en met volle tevredenheid!) myGosuMenu, http://code.gosu.pl/

Scheelt een hoop koppijn, kan ik je vertellen!

donderdag 1 maart 2007 16:42

Acties:

BtM909

Watch out Guys...

Wat dacht je van traagheid ten top en ook nog eens niet semantische code

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 1 maart 2007 16:43

Acties:

Sebazzz

3dp

Scripts zijn niet oke. Je kan niet van je bezoekers eisen dat ze Javascript aan hebben.

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]

donderdag 1 maart 2007 16:48

Acties:

BtM909

Watch out Guys...

Je zou de menu opzet van crisp (profiel) kunnen gebruiken. Vziw, zijn deze vrij bruikbaar (met credits

) en werken in alle moderne browsers

http://therealcrisp.xs4all.nl/upload/menu.html
http://therealcrisp.xs4all.nl/upload/menu_hori.html

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 1 maart 2007 16:58

Acties:

valkej

Topicstarter

Heb het menu van hem bekeken, maar je bent wel gelijk verplicht om javascript aan te hebben staan. Zonder javascript werkt het menu geheel niet. Ook krijg je gelijk een hele lading script mee + hacks voor IE. Javascript is niet nodig om :hover onder IE5.5 en IE6 te laten functioneren, dat is al te realiseren met behulp van een behavior.

Terugkomen op het probleem. Je zou zeggen dat het probleem zich op CSS niveau bevindt.

donderdag 1 maart 2007 17:01

Acties:

BtM909

Watch out Guys...

Die behavior (van bijvoorbeeld clay) is juist een JS

Als je geen IE5.5 en IE6 hacks (waarom noem je het uberhaupt hacks

) wil hebben (zijn alleen opmaak), dan sloop je dat eruit.

De JS die erbij zit is bedoeld zodat je menu niet onmouseout direct verdwijnt, maar na een bepaalde timeout. Gebruik je het niet, dan niet

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 1 maart 2007 17:04

Acties:

TeeDee

CQB 241

valkej schreef op donderdag 01 maart 2007 @ 16:58:
Heb het menu van hem bekeken, maar je bent wel gelijk verplicht om javascript aan te hebben staan. Zonder javascript werkt het menu geheel niet. Ook krijg je gelijk een hele lading script mee + hacks voor IE. Javascript is niet nodig om :hover onder IE5.5 en IE6 te laten functioneren, dat is al te realiseren met behulp van een behavior.

Terugkomen op het probleem. Je zou zeggen dat het probleem zich op CSS niveau bevindt.

En wat denk je wat in de source van dat behavior zit?

Heart..pumps blood.Has nothing to do with emotion! Bored

donderdag 1 maart 2007 17:04

Acties:

Verwijderd

miss kan een z-index helpen

donderdag 1 maart 2007 17:19

Acties:

valkej

Topicstarter

@BtM909: De verwijzing naar dat menu is zo en zo niets voor niets geweest. Heeft me wel een hint gegeven waar het bij mij fout ging.

Heb het menu op het moment goed werkend in IE7. Loop van de avond ga ik hem nog testen onder IE5.5 en IE6. Onder IE6 verwacht ik op het moment nog geen problemen met het menu, maar we zullen het snel genoeg zeker weten. Waarom het menu op de achtergrond verscheen onder IE7 was omdat ik een regel miste binnen de CSS.

Cascading Stylesheet:

#menu li ul {
  display:                none;
  position:               relative;
  margin-top:             10px;
}

position: relative; meegeven en het menu verschijnt netjes naar wens in beeld.

z-index word naar mijn weten niet goed ondersteund door IE, bij het oplossen van dit probleem heb ik er wel een testje mee gedaan onder zowel IE7 als FF2, maar geen van beiden deden iets met deze optie.

donderdag 1 maart 2007 18:56

Acties:

moozzuzz

ik heb niet naar je code gekeken, maar wellicht ligt het probleem op dezelfde plek waar ook het probleem ligt bij IE vs. Suckerfish e.d.:

IE vindt dat latere code/tags boven eerdere code/tags moeten komen te staan.

code:

<html-tags voor banner>
<html-tags voor menu>
<html-tags voor content>
<html-tags voor sidebars>

moet dus worden:

code:

<html-tags voor banner>
<html-tags voor content>
<html-tags voor sidebars>
<html-tags voor menu>

Ik heb hier lang op gezweet maar uiteindelijk dankzij een soortgelijke opmerking op een forum het weten oplossen (vandaar dat ik het nog weet :^).

donderdag 1 maart 2007 22:05

Acties:

valkej

Topicstarter

Die zelfde indruk heb ik ook. Op zich is het ook logisch deze manier van opbouwen. Aanpassen van je HTML-volgorde kan niet altijd, hangt ook geheel af van hoe je je website opbouwt. Zelf bouw ik hem op van boven naar beneden in de CSS file. Voor het menu heb ik, in mijn geval, een uitzondering moeten maken speciaal voor IE5.5 en 6.

Voor mij was de oplossing zoals ik hem hierboven heb omschreven. Moest de bovenstaande code wel verbouwen om hem ook goed te laten werken in IE5.5 en IE6, maar het werkt allemaal zoals het moet. (zonder gebruik te maken van lappen scripts, afgezien van de HTC files voor IE.) Resultaat een schone broncode. Wat mij ook gelukt is is om maar 1 CSS file te gebruiken zonder hacks die zonder problemen werkt met IE5.5, IE6, IE7, FF, Opera, en andere browsers die draaien op de Gecko engine.