CODEWITHSUNDEEP
htmlcssanimationborder
Zaenille
Zaenille

Reputation: 1384

Extra misplaced pixel in border

I made a test header to do my animations in.

enter image description here

What the thick red line does is to slide to the next header if the user clicks on it. It works fine for Home, About, and Contact...

enter image description here

but for some reason, Gallery has an extra misplaced pixel. (You might have to zoom in)

Misplaced pixel

Here is the HTML :

 <div id="header2">
    <div id="sliderArea2">
      <div id="slider2"></div>
    </div>
    <div id="mainHeaders2">
      <div> Home </div>
      <div> About </div>
      <div> Gallery </div>
      <div> Contact </div>
    </div>
</div>

The click actions :

$("#mainHeaders2 div").click(function(){
    var index = $("#mainHeaders2 div").index(this);
    $("#slider2").animate({marginLeft:index*25+"%"});
});

And the CSS :

#slider1,#slider2{
    height:4px;
    width:23%;
    background-color:red;
}

#sliderArea1, #sliderArea2 {
    height:4px;
    width:75%;
    margin:auto;
    /*border:1px solid; /* debugging purposes */
}

#mainHeaders1, #mainHeaders2 {
    width:75%;
    margin:auto;
}

#mainHeaders1 div{
    width:22%;
    float:left;
    margin:0px;
    margin-top:2px;
    margin-right:2%;
    padding-left:1%;
    padding-top:10px;
    border-top:1px solid red;
    /*border:1px solid; /*debugging */
    overflow:hidden;

}

#mainHeaders2 div{
    width:22%;
    float:left;
    margin:0px;
    margin-right:2%;
    padding-left:1%;
    padding-top:10px;
    border-top:1px solid red;
    /*border:1px solid; /*debugging */
    overflow:hidden;

}

FYI, I replicated this issue in JSFiddle.

Upvotes: 0

Views: 49

Answers (1)

Neilers
Neilers

Reputation: 421

When you use % there is a chance that the width might not get divided properly. Let's say you have 3 items and you assign a width of 33% to each of them. If the browser's width is 100, then there's a chance that 1 of your items might get 34 as the computed width while the other 2 get 33. To be pixel perfect, try setting a fixed width that's a multiple of the number of items you have so the width gets divided evenly among your headers, or just assign a fixed width to each of your individual headers.

Upvotes: 1

Related Questions