[CSS IE] Probleem met menu in IE

[Verwijderd]

Ik ben een kleine website voor een vriend aan het maken. Hierbij maak ik gebruik van wat PHP en een CSS-menu. In FireFox werkt het naar behoren, IE toont immers een irritant probleem.

Bekijk de volgende links:
- http://www.paliox.be/2TINA1/allure/index.php
- http://www.paliox.be/2TINA1/allure/index2.php

In de eerste link staat de pagina er hoe hij moet zijn (dus met een PHP-include - tot dusver is dit alleen op de beginpagina gedaan).
In de tweede link staat de pagina zonder 'inhoud' (dus geen PHP-include en een gewone witte ruimte).

Als je in de eerste link (met PHP include) naar het menu kijkt via IE, kan je vaststellen dat het niet helemaal 'lekker' loopt. Eens je een sub-menu in komt, gaat hij echt irritant doen. 9 op 10 keer dat ik een bepaalde knop (een andere knop dan de bovenste) wil bereiken, verdwijnt het hele sub-menu. Als je deze pagina vervolgens in FireFox opent, zie je dat dit helemaal niet zo is: het scrollen in het sub-menu gaat vlot zonder dat het sub-menu keer op keer verdwijnt. Het is juist alsof IE deze sub-menus supergevoelig behandelt?

Na dus letterlijk uren vanalles zitten te testen ben ik te weten gekomen dat de PHP-include er voor iets tussen zit. Als je de tweede link (zonder PHP-include) bezoekt in IE, werkt het menu naar behoren - inclusief sub-menus (deze verdwijnen dus niet keer op keer men een knop in het sub-menu probeert aan te wijzen).

Ik ben geen expert maar meestal kan ik zelf mijn plan wel trekken met dit soort dingen, alhoewel dit toch wel degelijk mijn petje te boven gaat. Kan iemand mij vertellen wat er nu juist fout loopt? Google leverde tot dusver niets op voor mij (laat staan dat ik weet hoe je dit probleem juist kan omschrijven).

Raf

[Sappie]

Ik weet zo 123 niet waar het probleem ligt, maar kan je wel wat tips geven. Wellicht dat daardoor de bug "vanzelf" verdwijnt. Ik zou div's met id=navigation en id=menu weghalen en de ul direct een id (menu bijvoorbeeld) geven. (je navigation div maak je nu zelfs breder dan je menu div, als je nix wilt wijzigen zou je daar eens naar kunnen kijken), Vervolgens op je ul dezelfde styles toepassen, tis immers ook een block level element, zij het met een standaard margin en padding in veel browsers.

Vervolgens zou ik je content niet floaten, het komt als de breedte juist is toch rechts van het naar links gefloate menu.

Als laatste zijn Hx elementen belangrijk om een juiste structuur binnen je site mee aan te brengen. Gebruik deze dan ook Zoals bijvoorbeeld:

HTML:

<h1>Allure Beauty Shop<h1>
<h2>Menu</h2>
<h2>Home pagina</h2>
<h3>kop1</h3>
<h4>kop1.1<h4>
<h3>kop2</h3>
<h3>etc</h3>
<h2>Footer oid</h2>

Hoop dat je er wat mee kan, mocht nog je vragen hebben dan weet je ons te vinden

[Verwijderd]

Bedankt voor de tips, Sappie.

Ik heb ondertussen gevonden wat nu juist het probleem is. Tussen de knoppen in het submenu zit een ruimte van 1px (margin-bottom: 1px). In IE, als je over deze pixel kwam, floepte het submenu weg. Dus als oplossing heb ik dus geen witruimte meer tussen de verschillende knoppen en werkt het menu naar behoren.

[Sappie]

Wellicht helpt het toepassen van bijv: display:inline-block ook wel en heeft het te maken met een hasLayout bug, zodat je de margin toch kan toepassen. Maar ik heb er niet echt naar gekeken ben ik bang.