[css] menu (li>a) niet correct getoond in ie

[jellevictoor]

2de poging...

Ik ben bezig met een site en in ie8 doet het menu moeilijk. ik heb dus deze structuur

HTML:

<div id="menu" class="grid_12">
                <ul class="clearfix">
                    <li style="width: 100px;"><a href="#" style="padding-left: 0px;">Beauty</a></li>
                    <li><a href="#">Wellness</a></li>
                    <li><a href="#">Arrangementen</a></li>
                    <li><a href="#">Acties</a></li>
                    <li><a href="#">Ligging</a></li>
                    <li style="width: 100px;"><a href="#" style="padding-right: 0px;">Contact</a></li>
                </ul>
            </div>

en mijn css ziet er zo uit

Cascading Stylesheet:

root {
    display: block;

}
*{
    margin: 0px;
    font-family:  sans-serif;
    text-align: justify;
}

a{
    color: #766342;
    font-weight: bold;
    text-decoration: none;
}

#menu li a:hover{
    background-color: #463935;
    color: #B6D7C6;
}
#menu ul, #sub-menu ul{
    list-style: none;
    padding: 0px
}
#menu{
    height: 114px;
    line-height: 114px;
    vertical-align: middle;
}
#menu li{
    display: inline-block;
    height: 60px;
    line-height: 60px;
    font-size: 13px;
    padding: 0px;
    margin:0px;
    text-align: center;
    width: 120px;
}
.menu-li{
    margin: 27px 0px;
}
#menu li a {
    color: #81756d;
    height: 60px;
    line-height: 60px;
    margin: 0px;
    padding: 0px 10px;
    text-align: center;
    display:block;
}

Cascading Stylesheet:

/* Containers
----------------------------------------------------------------------------------------------------*/
.container_16 {
    margin-left: auto;
    margin-right: auto;
    width: 960px;


}

/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
    margin-left: 0 !important;
}

.omega {
    margin-right: 0 !important;
}



/* Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16{
    display:inline;
    float: left;
    position: relative;
    margin-left: 10.0px;
    margin-right: 10.0px;
}

/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/


.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}


.clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

Ik heb al zitten experimenteren met display: inline, maar ie8 die standaard met win7 komt ondersteund dit blijkbaar niet, wel display:inline-block, maar dan hebben mijn links geen hoogte en breedte meer. Ze passen hen gewoon aan aan de tekst. (inline doet hij dus, maar niet inline + block)

weet iemand hoe ik dit moet oplossen? Of moet ik gewoon een nieuw systeem hanteren?

het werkt allemaal correct in google chrome (8.0.552.215 (67652) Ubuntu 10.10), dus hierkan je het gewenste resultaat zien.

[ Voor 0% gewijzigd door moto-moi op 11-12-2010 22:42 ]

[Raynman]

Voor mensen die geen IE8 hebben/niet willen rebooten naar Windows, lijkt een beschrijving (misschien zelfs een plaatje) van het probleem me wel handig. Je noemt een experiment en wat daarbij het probleem is, maar niet het oorspronkelijke probleem dat je met dat experiment probeert op te lossen.

Toch een (niet specifiek op dit geval toegesneden) suggestie: misschien li floaten? Laatste keer dat ik ernaar keek (niet heel recent) was inline-block-ondersteuning niet geweldig.

[miss_bleu]

wat moet het doen? Ik heb op IE8.0 en Chrome op Windows 7 namelijk precies hetzelfde.

[R4gnax]

Raynman schreef op zaterdag 11 december 2010 @ 21:25:
inline-block-ondersteuning niet geweldig.

Gecko en Webkit ondersteunen inline-block al tijden. IE8 ondersteunt inline-block, en voor IE6 en IE7 is het voor 99% (randgevallen daargelaten) te emuleren m.b.v. een element wat je inline maakt en vervolgens layout aan geeft.

[moozzuzz]

Is root een nieuw HTML element?

Het is al weer even geleden dat ik een menutje helemaal van niets gebrouwen heb, maar ik geloof dat je je A moet blocken en je LI moet floaten.

Het heeft mi ook weinig zin om iets in de zin van 10.0 px te definieren?

[Zoefff]

Zoals meerderen al melden wordt "inline-block" niet ondersteund door IE7 en lager. Je kan het gebruik beter vermijden dan met omwegen proberen werkend te maken, het resultaat is mijns inziens te onvoorspelbaar.

De gangbare manier is om dit met floats op te lossen. Oftewel, "float: left;" op de li's en van de a's een blokelement maken (maar dat zijn ze nu al). Dan nog even de overflow op je ul definieren (overflow: hidden;) en dan kan je de clearfix class ook meteen verwijderen. Nergens voor nodig

[jellevictoor]

Ik probeer even om alles te floaten. Ik wilde float vermijden omdat float meestal afgeraden wordt.
De 10.0px komt uit de css van 960.gs
Een afbeelding kan ik zeker post, het zal wel even duren, op deze pc heb ik geen windows.
bedankt voor de reacties alvast!

[mcDavid]

jellevictoor schreef op maandag 13 december 2010 @ 19:29:
Ik probeer even om alles te floaten. Ik wilde float vermijden omdat float meestal afgeraden wordt.

Door wie

[samo]

Door mensen die aangeven dat je daarmee een element uit de flow haalt en dit dus andere problemen kan geven.
IE ondersteunt inline-block alleen goed op elementen die uit zichzelf inline zijn. Dus niet op li maar wel op a.

[Zoefff]

Er is niets mis met floats zolang je ze correct gebruikt en weet waar je mee bezig bent. Het correct gebruik van floats hangt vaak samen met goede 'overflow' en 'clear' definities om de flow voorspelbaar te houden. Het is absoluut niet zo dat je met het gebruik van floats elementen uit de flow haalt. Integendeel, ze blijven juist in de flow zitten, je past deze alleen aan. Bij het gebruik van 'absolute' en 'fixed' positioning haal je elementen wél uit de flow, maar dat is hier niet het geval.

[apokalypse]

Wellicht is valide HTML ook handig...

http://validator.w3.org/c...29&doctype=Inline&group=0

tagje niet goed gesloten.