JS menu niet op goede plaats, CSS fout?

[Verwijderd]

Beste Tweakers,

Ik ben een JS menu (dat ik gevonden heb op websonic.nl) aan het toevoegen aan een bestaande site. (nl. http://www.vossingers.be).
Ik ben dit aan het testen op de pagina http://www.vossingers.be/test/agenda.html zoals jullie kunnen zien is de plaatsing van de menu niet zoals de menu geplaatst is op de originele site.
Ik krijg de menu niet in het bruine gedeelte. Ook geeft IE een ander resultaat dan firefox. Bij IE komt de schaduw van het bruine gedeelte onder de menu te staan, bij firefox komt de menu op de schaduw te staan.
zouden jullie me kunnen helpen met dit probleem?

De CSS is te vinden op http://www.vossingers.be/test/design2.css

Ik heb de code van het CSS bestandje dat bij de menu van websonic zat toegevoegd aan het CSS bestandje van de originele site.

Het JS vind je hier:
http://vossingers.be/test/menu.js

Alvast bedankt...

[Verwijderd]

Cascading Stylesheet:

.horizontalcssmenu ul li{
    position: relative;
    display: inline;
    float: left;
    display: block;
    margin-left:25px;
    color:#000000;
}

Je geeft een margin-left op van 25px, wat ervoor zorgt dat de li elementen 25px marge aan de linkerkant hebben, dus ook het eerste li element. Vandaar dat het menu zover van de rand begint. Hou er wel rekening mee dat de div ook niet strak aan de zwarte rand begint, waarschijnlijk vanwege één of andere padding (niet gecontroleerd).

[Verwijderd]

De margin van 25px was niet mijn probleem, maar het menu mocht inderdaad wat dichter aan de linkerkant staan. Wat bedoel je juist met 'rekening mee houden dat de div niet strak aan de zwarte rand begint'? Is het hierdoor dat mijn menu niet op de juiste plaats komt (op de bruine balk), hoe los ik dit dan op? (mijn CSS kennis is flink achteruit aan het gaan merk ik...)

[Rekcor]

Sowieso zitten er nog wat foutjes in je HTML: http://validator.w3.org/c...29&doctype=Inline&group=0

Je laat die <ul> met menu-elementen floaten. Hierdoor komt het menu - qua opmaak - los te staan van de <div class="horizontalcssmenu"> (het zweeft erboven).

Wat kan helpen is de li-elementen een negative margin-top mee te geven, maar erg fraai vind ik die oplossing niet:

Cascading Stylesheet:

.horizontalcssmenu ul li{
    position: relative;
    display: inline;
    float: left;
    display: block;
    margin-left:25px;
    margin-top: -10px;
    color:#000000;}

[Verwijderd]

Ik zal eerst mijn HTML en CSS files eens controleren op fouten, als ik er daarna nog niet uitgeraak laat ik het weten. Tot nu toe al bedankt voor de tips..