css - Why is there a vertical gap between these divs? -
for reason on chrome have "lime" colored 1px line between "top" , "bod". when remove overflow css directive line goes away.
i can see "lime" line in chrome , not in firefox.
here code: https://jsfiddle.net/m36yk1o9/5/
#chatapplicationclassic { padding: 0; margin: 0; border: 0; position: fixed; bottom: 0px; right: 30px; width: 300px; background-color: lime; box-sizing: border-box; border-radius: 5px 5px 0 0; box-shadow: 0px 0px 5px #000000; } #chatheaderclassic { padding: 0; margin: 0; border: 0; width: 100%; background-color: pink; cursor: pointer; border-radius: 5px 5px 0 0; border-top: 0px solid red; border-left: 0px solid red; border-right: 0px solid red; border-bottom: 0px solid red; box-sizing: border-box; } #chatheadertextclassic { padding: 0; margin: 0; border: 0; color: #ffff33; font-family: 'open sans', sans-serif; padding: 6px; font-size: 18px; font-weight: 100; display: inline-block; border-radius: 5px 5px 0 0; } #chatheaderarrowclassic { padding: 0; margin: 0; border: 0; color: #9900ff; display: inline-block; float: right; padding: 6px; font-size: 18px; } #chatbodyclassic { padding: 0; margin: 0; border: 0; background-color: white; border-left: 5px solid pink; border-right: 5px solid pink; height: 200px; width: 100%; box-sizing: border-box; padding-top: 10px; overflow: scroll; } .chatagentbubbleclassic { padding: 0; margin: 0; border: 0; background-color: #664eff; margin-right: 40px; margin-top: 10px; box-sizing: border-box; border-radius: 4px; } .chatvisitorbubbleclassic { padding: 0; margin: 0; border: 0; background-color: #6600ff; margin-left: 40px; margin-top: 10px; box-sizing: border-box; border-radius: 4px; } .chatagentbubbletextclassic { font-size: 12px; padding: 8px; font-family: sans-serif; color: lightblue; } .chatvisitorbubbletextclassic { font-size: 12px; padding: 6px; font-family: sans-serif; color: skyblue; }<div id="chatapplicationclassic"> <div id="chatheaderclassic"> <div id="chatheaderarrowclassic"> arr </div> <div id="chatheadertextclassic"> top </div> </div> <div id="chatbodyclassic"> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> </div> <!-- <div id="chatfooterclassic"> <div id="chatinputcontainerclassic"> <input placeholder="type here..." id="chatinputclassic" type="text" /> </div> <div id="chatsendbutton"> <div id="chatsendbuttontext">send</div> </div> </div>--> </div>
it's 2 child elements in header. padding makes 1 of box taller container, float set there causes overflow, didn't set clearfix there.
but since have float:right set on "top", set float:left on "arr", , clear floats adding overflow:hidden on container. thin lime line removed.
#chatapplicationclassic { padding: 0; margin: 0; border: 0; position: fixed; bottom: 0px; right: 30px; width: 300px; background-color: lime; box-sizing: border-box; border-radius: 5px 5px 0 0; box-shadow: 0px 0px 5px #000000; } #chatheaderclassic { padding: 0; margin: 0; border: 0; width: 100%; background-color: pink; cursor: pointer; border-radius: 5px 5px 0 0; border-top: 0px solid red; border-left: 0px solid red; border-right: 0px solid red; border-bottom: 0px solid red; box-sizing: border-box; overflow: hidden; /*added*/ } #chatheadertextclassic { padding: 0; margin: 0; border: 0; color: #ffff33; font-family: 'open sans', sans-serif; padding: 6px; font-size: 18px; font-weight: 100; /* display: inline-block; */ border-radius: 5px 5px 0 0; float: left; /*added*/ } #chatheaderarrowclassic { padding: 0; margin: 0; border: 0; color: #9900ff; /* display: inline-block; */ float: right; padding: 6px; font-size: 18px; } #chatbodyclassic { padding: 0; margin: 0; border: 0; background-color: white; border-left: 5px solid pink; border-right: 5px solid pink; height: 200px; width: 100%; box-sizing: border-box; padding-top: 10px; overflow: scroll; } .chatagentbubbleclassic { padding: 0; margin: 0; border: 0; background-color: #664eff; margin-right: 40px; margin-top: 10px; box-sizing: border-box; border-radius: 4px; } .chatvisitorbubbleclassic { padding: 0; margin: 0; border: 0; background-color: #6600ff; margin-left: 40px; margin-top: 10px; box-sizing: border-box; border-radius: 4px; } .chatagentbubbletextclassic { font-size: 12px; padding: 8px; font-family: sans-serif; color: lightblue; } .chatvisitorbubbletextclassic { font-size: 12px; padding: 6px; font-family: sans-serif; color: skyblue; }<div id="chatapplicationclassic"> <div id="chatheaderclassic"> <div id="chatheaderarrowclassic"> arr </div> <div id="chatheadertextclassic"> top </div> </div> <div id="chatbodyclassic"> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> bod <br /> </div> <!-- <div id="chatfooterclassic"> <div id="chatinputcontainerclassic"> <input placeholder="type here..." id="chatinputclassic" type="text" /> </div> <div id="chatsendbutton"> <div id="chatsendbuttontext">send</div> </div> </div>--> </div>
Comments
Post a Comment