Chrome 1px line bug

Question

I am making one fan-site and have very stupid bug on news bar. When I zoom the page, 1px line appears.

This is the code:

<div class="velikibar">
<div id="velikibar_h">
    <div id="naslovbar"><?=$naslov?></div>
</div>
<div id="velikibar_b">
    <div class="paddingvelikibar">
    <?=$sadrzaj?>
    </div>
</div>
<div id="velikibar_f">
    <div id="fblikedugme"><?=$vreme?><br /><div class="fb-like" data-href="http://********.**/article.php?id=<?=$id?>" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div></div>
    <div id="komentarbarbox"><a href="article.php?id=<?=$id?>" target="_self">Komentari (<?=$brkomentara?>)</a></div>
</div>

And this is the CSS ( http://tny.cz/d9fb11db ):

.velikibar
{
    background-color:transparent;
    width: 652px;
}

#velikibar_h
{
    background-image:url('slike/velikibar_h.png');
    background-repeat: no-repeat;
    width: 652px;
    height: 109px;
    padding: 0;
    margin: 0;
}

#velikibar_b
{
    background-image:url('slike/velikibar_b.png');
    background-repeat: repeat-y;
    width: 652px;
    min-height: 30px;
    padding: 0;
    margin: 0;
}

#velikibar_f
{
    background-image:url('slike/velikibar_f.png');
    background-repeat: no-repeat;
    width: 652px;
    height: 112px;
    padding: 0;
    margin: 0;
}

#velikibar_f2
{
    background-image:url('slike/velikibar_f2.png');
    background-repeat: no-repeat;
    width: 652px;
    height: 112px;
    padding: 0;
    margin: 0;
}

.paddingvelikibar
{
    padding: 5px 35px 5px 30px;
    text-align:justify;
    color: #fff5f9;
}

#fblikedugme
{
    position: absolute;
    margin-left: 35px;
    margin-top: 40px;
    color:#fff5f9;
    line-height: 20px;
}

#komentarbarbox
{
    position: absolute;
    margin-left: 425px;
    margin-top: 65px;
}

#komentarbarbox a, #komentarbarbox a:link, #komentarbarbox a:visited
{
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 1px 0 #6f1c3f;
    color: #fdd2e4; 
    text-decoration:none;
}

#komentarbarbox a:hover, #komentarbarbox a:focus
{
    color: #d61566;
    text-decoration:none;
}

#naslovbar
{
font: 23px/1.4em arial, helvetica;
color: #e1aec4;
padding-top: 50px;
padding-left: 35px;
text-shadow: #FCFCFC 0px 1px 0px;
}

.paddingvelikibar img
{
    background-color: #fff2f7;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    behavior: url("skripte/ie-css3.htc");
    padding: 4px;
}

Please help me how to fix this. Thanks in advance

Answer 1

This appears to be a browser bug.

For example, an element which is 5px wide, viewed on 1.5 zoom would be 7.5px wide, but the browser has to round it to full pxls so something like this can happen.

To make sure it doesnt happen you can make the elements overlap, or in your case, best would be not to split the pink background image in 2 elements, but have a single element carry the whole image.

Chrome doesnt use font-resize as zoom option, so it is very unlikely that this is caused by a particullar line of css.