menu (li>a) niet correct getoond in ie

[jellevictoor]

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

HTML:

<ul class="clearfix">
                    <li style="width: 100px;"><a href="http://sharonlannoo.be/index.php/block/index/1" style="padding-left: 0px;">Beauty</a></li>
                    <li><a href="http://sharonlannoo.be/index.php/block/index/2">Wellness</a></li>
                    <li><a href="http://sharonlannoo.be/index.php/arrangement">Arrangementen</a></li>
                    <li><a href="http://sharonlannoo.be/index.php/action">Acties</a></li>
                    <li><a href="http://sharonlannoo.be/index.php/location">Ligging</a></li>
                    <li style="width: 100px;"><a href="http://sharonlannoo.be/index.php/contact" style="padding-right: 0px;">Contact</a></li>
                </ul>

en mijn css ziet er zo uit

Cascading Stylesheet:

root {
    display: block;

}
*{
    margin: 0px;
    font-family:  sans-serif;
    text-align: justify;
}
p{
    padding: 5px;
}
.label{
    font-weight: bold;
    display:block;
}
/* accent = #b6d7c6*/
body{
    background-color: #463935;
    color: #666;
    font-size: 12px;
}
a{
    color: #766342;
    font-weight: bold;
    text-decoration: none;
}
h1,h2,h3, h1>span, h2>span, h3>span{
    font-family: Serif,'Century Schoolbook L Italic';
    font-style: italic;
    font-weight: bold;
}
#content{
    display:block;
    background-color: #f8f8f8;
        padding: 20px 0px 20px 0px;
}
#header{
    margin-top: 20px;
    padding: 10px 0px;
    line-height: 114px;
    background-color: #3a2e2b;
}
#footer{
    color: #81756d;
    margin: 0px 0px 20px 0px;
    padding: 20px 0px;
    font-weight: bold;
}
#header-logo{
    background-image: url("/resources/images/logo.jpg");
    background-repeat: no-repeat;
}
#sub-menu ul{
    margin: 0px;
    padding: 0px;
}
#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;
}
.alpha_menu > .alpha {
    padding-left: 0px;
}
.omega_menu > .omega{
    border: 0px;
    margin-right: 0px;
    padding-right: 0px;
}
#sub-menu li a{
    display: block;
    height: 20px;
    line-height: 20px;
    padding: 0px;
    margin-top:5px;
    vertical-align: text-bottom;
}
#sub-menu li a:hover{
    padding-left: 10px;
    padding-right: -10px;
}
#content-header{
    color: #eeeeee;
    font-weight: bold;
    height: 200px;
    background-image: url("/resources/images/layout/header-1.jpg");
}
#content-header > div > h1{
    padding: 20px 10px;
    border: none;
    height: 80px;
}
h1{
    font-size: 24px;
    border-bottom: 1px dotted #B6D7C6;
    margin-bottom: 10px;
}
h2{
    font-size: 20px;
}
h3{
    font-size: 16px;
}
#slogan{
color:#FFFFFF;
text-align: right;
font-family: Serif;}

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;
}


/* Grid >> 2 Columns
----------------------------------------------------------------------------------------------------*/

.container_16 .grid_1{
    width:40px;
}

.container_16 .grid_2{
    width:100px;
}

.container_16 .grid_3{
    width:160px;
}

.container_16 .grid_4{
    width:220px;
}

.container_16 .grid_5{
    width:280px;
}

.container_16 .grid_6{
    width:340px;
}

.container_16 .grid_7{
    width:400px;
}

.container_16 .grid_8{
    width:460px;
}

.container_16 .grid_9{
    width:520px;
}

.container_16 .grid_10{
    width:580px;
}

.container_16 .grid_11{
    width:640px;
}

.container_16 .grid_12{
    width:700px;
}

.container_16 .grid_13{
    width:760px;
}

.container_16 .grid_14{
    width:820px;
}

.container_16 .grid_15{
    width:880px;
}

.container_16 .grid_16{
    width:940px;
}





/* Prefix Extra Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/

.container_16 .prefix_1 {
    padding-left:60px;
}

.container_16 .prefix_2 {
    padding-left:120px;
}

.container_16 .prefix_3 {
    padding-left:180px;
}

.container_16 .prefix_4 {
    padding-left:240px;
}

.container_16 .prefix_5 {
    padding-left:300px;
}

.container_16 .prefix_6 {
    padding-left:360px;
}

.container_16 .prefix_7 {
    padding-left:420px;
}

.container_16 .prefix_8 {
    padding-left:480px;
}

.container_16 .prefix_9 {
    padding-left:540px;
}

.container_16 .prefix_10 {
    padding-left:600px;
}

.container_16 .prefix_11 {
    padding-left:660px;
}

.container_16 .prefix_12 {
    padding-left:720px;
}

.container_16 .prefix_13 {
    padding-left:780px;
}

.container_16 .prefix_14 {
    padding-left:840px;
}

.container_16 .prefix_15 {
    padding-left:900px;
}



/* Suffix Extra Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/

.container_16 .suffix_1 {
    padding-right:60px;
}

.container_16 .suffix_2 {
    padding-right:120px;
}

.container_16 .suffix_3 {
    padding-right:180px;
}

.container_16 .suffix_4 {
    padding-right:240px;
}

.container_16 .suffix_5 {
    padding-right:300px;
}

.container_16 .suffix_6 {
    padding-right:360px;
}

.container_16 .suffix_7 {
    padding-right:420px;
}

.container_16 .suffix_8 {
    padding-right:480px;
}

.container_16 .suffix_9 {
    padding-right:540px;
}

.container_16 .suffix_10 {
    padding-right:600px;
}

.container_16 .suffix_11 {
    padding-right:660px;
}

.container_16 .suffix_12 {
    padding-right:720px;
}

.container_16 .suffix_13 {
    padding-right:780px;
}

.container_16 .suffix_14 {
    padding-right:840px;
}

.container_16 .suffix_15 {
    padding-right:900px;
}



/* Push Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/

.container_16 .push_1 {
    left:60px;
}

.container_16 .push_2 {
    left:120px;
}

.container_16 .push_3 {
    left:180px;
}

.container_16 .push_4 {
    left:240px;
}

.container_16 .push_5 {
    left:300px;
}

.container_16 .push_6 {
    left:360px;
}

.container_16 .push_7 {
    left:420px;
}

.container_16 .push_8 {
    left:480px;
}

.container_16 .push_9 {
    left:540px;
}

.container_16 .push_10 {
    left:600px;
}

.container_16 .push_11 {
    left:660px;
}

.container_16 .push_12 {
    left:720px;
}

.container_16 .push_13 {
    left:780px;
}

.container_16 .push_14 {
    left:840px;
}

.container_16 .push_15 {
    left:900px;
}





/* Pull Space >> 2 Columns
----------------------------------------------------------------------------------------------------*/

.container_16 .pull_1 {
    right:60px;
}

.container_16 .pull_2 {
    right:120px;
}

.container_16 .pull_3 {
    right:180px;
}

.container_16 .pull_4 {
    right:240px;
}

.container_16 .pull_5 {
    right:300px;
}

.container_16 .pull_6 {
    right:360px;
}

.container_16 .pull_7 {
    right:420px;
}

.container_16 .pull_8 {
    right:480px;
}

.container_16 .pull_9 {
    right:540px;
}

.container_16 .pull_10 {
    right:600px;
}

.container_16 .pull_11 {
    right:660px;
}

.container_16 .pull_12 {
    right:720px;
}

.container_16 .pull_13 {
    right:780px;
}

.container_16 .pull_14 {
    right:840px;
}

.container_16 .pull_15 {
    right:900px;
}




/* 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;
}

Zoals je kan zien heb ik al zitten experimenteren met inline-block, maar ie8 die standaard met win7 komt ondersteund dit blijkbaar niet, wel display:inline, maar dan hebben mijn links geen hoogte en breedte meer. Ze passen hen gewoon aan aan de tekst.

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 daar kan je het gewenste resultaat zien.

[MueR]

Wanneer je met een probleem zit, zien we graag alleen relevante code. Wij hebben geen zin om door 550 regels code te moeten graven. Je code dumpen en verwachten dat wij het oplossen, valt onder de categorie Kan iemand even .. ? Dit topic gaat daarom ook op slot.

Mocht je een nieuw topic aanmaken, neem dan Het algemeen beleid #quickstart nog even door.