weird lines is showing when overlaying two div

Question

I'm trying to make a custom splitter which is a <div> between page1 and page2, but some weird lines is showing which I don't know where they came from, or how to hide them!

spiltter.png

pattern1.png Snippedshot

 .zikzak, .splitter, .split-content
 {
    float:left;
    width:100%;
 }
 .splitter
 {
    height:250px;
 }
 .split-content
 {

    margin-top:-50px;
    height:250px;
    background:url(img/pattern1.png) repeat;
 }
 .zikzak
 {
    position:relative;
    height:50px;
 }

HTML:

 <div class="splitter">
    <div class="zikzak" style="background:url(img/spiltter.png) repeat-x"></div>
    <div class="split-content"></div>
    <div class="zikzak" style="background:url(img/spiltter2.png) repeat-x"></div>
 </div>

Answer 1

Problem with you image called spiltter.png As the image edges are transparent not solid, that's why you are getting strange behavior.

To solve this bug you have to filled image edges with solid color.