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.
Domanda
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>
Soluzione
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.