Question

I have what seems to be a noob question but I cannot figure this out for the light of me. I really need another set of eyes to help me see why is the li tags not rendering the width in IE8.

While other browsers like chrome and firefox render the style just fine, IE8 refuses to cooperate and refuses to set the width of each li to 108px.

Here is the HTML:

<div id="navigation">
<ul>
    <li><a href="">HOME</a></li>
    <li><a href="">SERVICES</a></li>
    <li class="current_tab"><a href="">COMPANY</a></li>
    <li><a href="">EMPLOYEE</a></li>
    <li><a href="">WORK TOOLS</a></li>
    <li><a href="">CONTACT</a></li>
</ul>

And here is the CSS for that nav as well as parent tags:

body, html {
    overflow: auto;
    position: relative;
}

h3 {
    margin-bottom: 10px;
}

#employee_dir {
    margin-bottom: 20px;
}

#lotus {
    padding-top: 20px;
}

#content {
    margin-top: 10px;
}

#navigation li{
    background-color: transparent;
    background: url('../img/off-tab.png') no-repeat;
    padding-top: 0px !important;
    width: 108px !important;
    padding: 0px;
}

.current_tab {
    background-color: transparent;
    background: url('../img/on-tab.png') no-repeat !important;
    width: 108px;
    height: 33px !important;
}

#navigation a {
    text-align: center;
}

I am also attaching some screenshots I took of what I see on my end.

Answer 1

Don’t use !important declaration, instead try making <li> as inline-block

#navigation li{
    background-color: transparent;
    background: url('../img/off-tab.png') no-repeat;
    padding-top: 0px !important;   <------ Why padding here?
    width: 108px;
    padding: 0px;   <-------Your padding-top gets re-setted here
    display: inline-block;  <------- Here
}