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

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -