CODEWITHSUNDEEP
htmlcss
Aaron Benjamin
Aaron Benjamin

Reputation: 1389

Negative Margin not working in IE

I'm having some trouble getting a negative margin to work in IE. I have some "tabs" laid out horizontally with 1px left border and a left-margin of -1px. This seems to work fine in all browsers except IE.

The right-most tab is falling down below the other 3.

Any thoughts?

HTML

<div class="jNav button4">
<ul>
    <li class="active">
        <a href="#slide1"><p style="background-image: url(images/icn-unlim.png);"></p>Unlimited</a>
    </li>   

    <li>
        <a href="#slide2"><p style="background-image: url(images/icn-info.png);"></p>What you need to know...</a>
    </li>   

    <li>
        <a href="#slide3"><p style="background-image: url(images/icn-data.png);"></p>What can you do with a GB?</a>
    </li>   

    <li>
        <a href="#slide4"><p style="background-image: url(images/icn-choose.png);"></p>Explore your options</a>
    </li>                   
</ul>
</div>

CSS

    .jNav ul{
    overflow: hidden;
    border-bottom: solid 1px #ccc;
}
.button3 ul li{
        width: 33.3%;
}

.button4 ul li{
        width: 25%;

}

.button5 ul li{
        width: 20%;
}

.jNav ul li{
    text-align: center;
    display: inline-block;
    margin: 0px;
    float: left;
    background-color: #f4f4f4;
    border-top: solid 3px #ccc;

}

.jNav ul li + li {
    border-left: solid 1px #ccc;
    margin-left: -1px;
}

.jNav ul li a{
    display: block;
    color: #666;
    opacity: .5;
    padding:10px 0px;

}

.jNav ul li a:focus {
    opacity: 1;}

.jNav ul li a:hover{
    display: block;
    text-decoration: none;
    opacity: 1;
    border-top: solid 3px #ccc;
    padding-bottom: 7px;
}

.jNav ul .active{
    border-top: solid 3px #ff7200;
    background-color: #fff;
}

.jNav ul .active a{
    color: #ff7200;
    opacity: 1;

}

.jNav ul .active a:hover{
    padding:10px 0px;
    border-top: none;
}


.jNav ul .active p{
    background:no-repeat top center;
}

.jNav ul li a p{
    height:50px;
    width: 50px;
    text-align: center;
    background:no-repeat bottom center;
    margin: 10px auto;
}

Upvotes: 2

Views: 935

Answers (1)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Try to use :)

.jNav ul li + li {
    border-left: solid 1px #ccc;
    /*margin-left: -1px;*/
   position: relative;
   left: -1px;
}

Or, you can use like this (no need to re-layout the css):

.jNav ul li + li {
    border-left: solid 1px #ccc;
    margin-left: -1px;
   position: relative;
   zoom: 1;
}

Upvotes: 2

Related Questions