[CSS] Menu positie problemen IE only

[We Are Borg]

Ik ben een menu in elkaar aan het zetten en stuit tegen wat problemen aan in IE waarvoor ik geen oplossing kan vinden en dus een duwtje in de goede richting zoek.

Ik heb een testcase online gezet met alleen relevante CSS om het wat duidelijker te maken:
http://www.planet.nl/~terps407/testcase.html

Cascading Stylesheet:

* {
margin: 0;
padding: 0;
}

#mainmenu {
margin-top: 166px; /* als je deze verwijdert, wordt de info bar wel goed geplaatst qua verschil met menu in zowel IE als FF */
}

#mainmenu li {
list-style: none;
float: left;
width: 53px;
margin-left: 40px;
width: 75px;
}

#mainmenu li a {
padding: 0px;
}

#mainmenu li span {
/* visibility: hidden; */
}

#mainmenu li ul {
position: absolute;
display: none;
margin-top: 9px;
background-color: #f3f2ed;
border: 1px solid #000;
}

#mainmenu li ul li {
float: none;
width: auto;
padding: 2px 9px 1px 9px;
margin: 0!important;
}

#mainmenu li ul li a {
display: block;
}

#infobar {
width: 751px;
height: 20px;
margin: 50px 0 0 7px;
color: #000;
background-color: red;
border-bottom: 1px solid #cacaca;
}

De JS komt uit het voorbeeld van crisp's menu, aangezien JS niet mijn sterkste kant is. Het probleem ligt echter ook niet bij de JS, maar bij de door mij gecreeerde CSS. Even voor de duidelijkheid, FF/Opera doen het prima en IE komt in de buurt, maar niet genoeg.

Gewenste resultaat (FF/Opera/whatever ):



Afstand tussen het #mainmenu en de #infobar en de pulldown menu netjes eronder. Nu komt IE:



De afstand tussen het #mainmenu en de #infobar is weg en het menu klapt niet goed uit. Twee problemen dus.

Probleem 1: de afstand tussen het menu en de infobar wordt in beide browser gelijk gemaakt als ik de top margin van #mainmenu weg haal. Dat heb ik wel kunnen achterhalen, waarom dit verwijderen het resultaat geeft wat het doet in IE is voor mij een raadsel. Dit zou houden is echter geen mogelijkheid aangezien dit top margin gewoon nodig is voor de lay-out.

Probleem 2: menu klapt niet goed uit. Oplossing die werkt: negatieve margins de boel naar beneden en naar links duwen. Dit werkt uiteraard wel, maar is zoals je je kunt voorstellen geen nette oplossing en ben dus op zoek naar 'iets' netter resultaat om het toch in IE te kunnen laten werken
Verder heb ik geprobeerd om een vaste hoogte en breedte voor IE in te stellen (de bekende height 1%), maar dit gaf helaas ook niet het gewenste resultaat.

Heeft iemand een idee in welke richting ik het rare (?) resulaat van IE kan zoeken zodat het ik het toch werkend krijg voor IE ?

[Jerry]

Ik heb ook last van probleem 2 en heb ook nog geen oplossing ervoor gevonden.
Ik heb er een negatieve margin van gemaakt met een iefix.css, maar het is idd niet netjes.

[Michali]

Als je #mainmenu een height geeft (1% bijvoorbeeld), dan wordt infobar wel goed geplaatst. (Vraag me niet waarom.) Verder kun je aan "#mainmenu li a" een display: block; geven om het menu goed te plaatsen en aan "#mainmenu li ul li a" een white-space: nowrap; geven om die tekst niet te laten wrappen.

[benoni]

Toegevoegd: 'display: block;'

code:

            #mainmenu li a {
                display: block;
                text-decoration: none;
                padding: 0px;
            }

Dan moet ie altijd de 'regel omslaan' na de link die boven het menu staat.

Edit: stom van me, dat schreef Michali hierboven ook al.

[ Voor 17% gewijzigd door benoni op 18-06-2006 11:54 ]

[We Are Borg]

Thanks, bedankt hiervoor Die height 1% kan ik nog wel mee dat IE dat nodig heeft, maar die li a als block weergeven had ik niet zosnel als oplossing kunnen bedenken. Verder dan nog wat schoonheidsfoutjes in IE, maar die los ik zelf wel op. Bedankt