Peyman Etedali Peyman Etedali - 7 months ago 16
HTML Question

why looks my margin different in chrome as in all other browsers

i have here a problem that i never seen before. i build a header with an menu icon on the left side and three icons on the right side of it. Two of the three icons on the right side, have badges. The problem is that the badges are looking perfect on safari, firefox, edge etc. but on chrome are they to much left. if i change now the margin from

margin: 0 0 0 -8px
to
margin: 0 0 0 11px
is it looking good on chrome, but in all other browser is it to much right. How can it be that a margin looks different? Never seen it before.

.pulse-badge {
background: rgba(51,51,51, 0.87); ;
border-radius: 50%;
min-height: 1.3rem;
margin: 0 0 0 -8px;
position: absolute;
min-width: 1.3rem;
top: 0.8em;
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51,51,51, .051);
transform: translate3d(0, 0, 0);
animation: pulse 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);}

@keyframes pulse {
to {
box-shadow: 0 0 0 12px transparent, 0 0 0 16px rgba(90, 153, 212, 0);
}
}


thats the css of the badges and im using skeleton as framework. I also have here a jsfiddle where ya can see it, if ya change the margin. and here is a link with the live project if ya whant to see it with the other content if it helps live

enter image description here
chrome

Answer

Try to use right than margin: then position your list to relative Check this out https://jsfiddle.net/febg4cuo/3/

Edited: you need to add position relative to your list

 .notification-bar> li{position:relative;}