Gilberg February 2016

Why is there a vertical gap between these divs?

For some reason on Chrome I have a "lime" colored 1px line between the "top" and the "bod". When I remove the overflow css directive the line goes away.

I can only see the "lime" line in Chrome and not in Firefox.

enter image description here

Here is the 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;
  m        

Answers


Jonathan Vance February 2016

Change your padding from 6px to 5px:

#chatHeaderArrowClassic {
                padding:0;
                margin:0;
                border:0;
                color:#9900ff;
                display:inline-block;
                float:right;
                padding:5px;
                font-size:18px;
            }


Jannik February 2016

enter image description here

Hi,

It looks like the parent element has a background color of lime and if you hide the #chatHeaderClassic background-color it shows through.Proof:

#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;

}

So just change that above code to:

#chatApplicationClassic {
padding: 0;
margin: 0;
border: 0;
position: fixed;
bottom: 0px;
right: 30px;
width: 300px;
background-color: pink;
box-sizing: border-box;
border-radius: 5px 5px 0 0;
box-shadow: 0px 0px 5px #000000;

}

Hope this helps. Regards


Pangloss February 2016

It's probably from the two child elements in the header. The padding makes one of the box taller than the container, with float set there it causes overflow, as you didn't set any clearfix there.

But since you have float:right set on "Top", just set float:left on "Arr", and clear the floats by adding overflow:hidden on the container. That thin lime line will be removed.

Updated jsFiddle

#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%;
  

Post Status

Asked in February 2016
Viewed 1,436 times
Voted 6
Answered 3 times

Search




Leave an answer