html - Remove gaps between DIVs -
this website designed tablets, , problem is, when window resized, there margin, or kind of gap between 3 divs , background images (they stacked vertically). image chalkboard in 3 pieces. middle div needs able expand text input while top static , bottom piece gets pushed down middle expands.
link site:
url no longer available
css divs far
.blackboard1 { background:url(../img/chalkboardtop.png); height: 28px; background-size:100% auto; background-repeat:no-repeat; z-index:9999999; } .blackboard2 { background-size:100% auto; background:url(../img/chalkboardmiddle.png); background-size:100% auto; background-repeat:repeat-y; z-index:-9999999; padding-top:28px; padding-bottom:35px; overflow:visible; } .blackboard2 p{ color:#fff; background-color:none;} .blackboard3 { background-size:100% auto; background:url(../img/chalkboardbottom.png); height: 28px; background-size:100% auto; background-repeat:no-repeat; z-index:9999999; } #blackboardwrap { background:url(../img/chalkboardmiddle.png); */ background-size:100% auto; background-repeat:repeat-y; }
one solution used don't think optimal, have image serves middle image, serve fourth background wraps around 3 divs , sits behind them. way when there "cracks" between divs, can't notice much. using solution seems add loading time , doesn't quite right.
gaps because of margins:
p { margin: 0 0 10px; }
please remove margins , see if gaps still there or not.
Comments
Post a Comment