Reputation: 586
So, I'm making a chatting app, but for some reason, the first messages are appearing higher above the second message, and the second message is appearing too low. I've gone through Chrome Devtools to scour where these ghost margins could be coming from, but I can't find where it's occurred.
ul{
list-style: none;
margin: 0;
padding: 0;
width:70%;
min-width: 560px;
}
ul li{
display:inline-block;
clear: both;
padding: 20px;
border-radius: 30px;
margin-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
max-width:150px;
word-wrap: break-word;
}
.message:not([class*="self"]){
background: #eee;
float: left;
position: relative;
left: 60px;
}
.message.self{
float: right;
background: #2ea44f;
color: #fff;
}
.self.middle{
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.self.end{
border-top-right-radius: 5px;
}
.self.start{
border-bottom-right-radius:5px;
}
.message:not([class*="self"]).middle{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.message:not([class*="self"]).start{
border-bottom-left-radius: 5px;
}
.message:not([class*="self"]).end{
border-top-left-radius: 5px;
}
.msgBlock{
margin-top:10px;
margin-bottom:10px;
width:100%;
}
.msgBlock:not([class*="selfBlock"]){
float: left;
}
.msgBlock.selfBlock{
float: right;
}
.pfp{
width: 60px;
position: relative;
left: -135px;
border-radius: 50%;
}
<ul id="chat"><div class="msgBlock selfBlock"><li class="message self start">Hi guys!</li><li class="message self middle">Hope this works!</li><li class="message self end">what's going on</li></div><div class="msgBlock"><img src="https://lh6.googleusercontent.com/-BPIa4VYnvn0/AAAAAAAAAAI/AAAAAAAABWM/vLhYpyzOwB0NW8expqNpcZnYxuyMBAykQCLcDEAE/s256-c-k-no-mo/photo.jpg" class="pfp"><li class="message start">It does work!</li><li class="message middle">At least i think so</li><li class="message end">So far it looks good</li></div></ul>
Upvotes: 2
Views: 351
Reputation: 208002
It's coming from the image. Set the vertical alignment on the image to something like top or middle:
ul {
list-style: none;
margin: 0;
padding: 0;
width: 70%;
min-width: 560px;
}
ul li {
display: inline-block;
clear: both;
padding: 20px;
border-radius: 30px;
margin-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
max-width: 150px;
word-wrap: break-word;
}
.message:not([class*="self"]) {
background: #eee;
float: left;
position: relative;
left: 60px;
}
.message.self {
float: right;
background: #2ea44f;
color: #fff;
}
.self.middle {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.self.end {
border-top-right-radius: 5px;
}
.self.start {
border-bottom-right-radius: 5px;
}
.message:not([class*="self"]).middle {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.message:not([class*="self"]).start {
border-bottom-left-radius: 5px;
}
.message:not([class*="self"]).end {
border-top-left-radius: 5px;
}
.msgBlock {
margin-top: 10px;
margin-bottom: 10px;
width: 100%;
}
.msgBlock:not([class*="selfBlock"]) {
float: left;
}
.msgBlock.selfBlock {
float: right;
}
.pfp {
width: 60px;
position: relative;
left: -135px;
border-radius: 50%;
vertical-align:top;
}
<ul id="chat">
<div class="msgBlock selfBlock">
<li class="message self start">Hi guys!</li>
<li class="message self middle">Hope this works!</li>
<li class="message self end">what's going on</li>
</div>
<div class="msgBlock"><img src="https://lh6.googleusercontent.com/-BPIa4VYnvn0/AAAAAAAAAAI/AAAAAAAABWM/vLhYpyzOwB0NW8expqNpcZnYxuyMBAykQCLcDEAE/s256-c-k-no-mo/photo.jpg" class="pfp">
<li class="message start">It does work!</li>
<li class="message middle">At least i think so</li>
<li class="message end">So far it looks good</li>
</div>
</ul>
Upvotes: 4