CODEWITHSUNDEEP
htmlcssinternet-explorer-8
Renzo Gaspary
Renzo Gaspary

Reputation: 300

IE8 ignores width on li tags

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.

This is IE8 showing the css using the dev tools built in the browser However, this is what it renders for the li tag This is how the nav renders in IE8 However this is how it renders in chrome

Upvotes: 2

Views: 1199

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157314

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
}

Upvotes: 3

Related Questions