User Online component not aligning correctly on different browser

User online component avatar name isn't aligning correctly on different browser. 

On Chrome browser the names are align correctly.

But, on Firefox and Safari Browser the name isn't align.

Any help will be greatly appreciated. Thanks!

Below is my code.

<div class="lia-panel lia-panel-standard ActionLinksTaplet Chrome lia-component-community-widget-admin-links">
<div class="lia-panel-content-wrapper">
<div class="lia-panel-content">

<div class="lia-decoration-border">
<div class="lia-decoration-border-top">
<div></div>
</div>
<div class="lia-decoration-border-content">
<div>
<div class="lia-panel-heading-bar-wrapper">
<div class="lia-panel-heading-bar">
<span class="custom-users-online-title">Users Online</span>
<span class="custom-users-online-count">
<#assign member_count = rest('/users/online/registered/count').value?number />
<#assign guest_count = rest('/users/online/anonymous/count').value?number />
${member_count} <#if member_count <= 1>MEMBERS | <#else>MEMBERS </#if> ${guest_count} <#if guest_count <= 1>GUESTS<#else> GUESTS</#if></span>
</div>
</div>
<div class="custom-users-online-wrapper">
<div class="custom-users-online-content">
<ul id="list_0" class="online_users">
<#assign seen_users = {} />
<#list rest('/users/online?page_size=40&restapi.response_style=view').users.user as online_user>
<#if ! seen_users[online_user.@href]??>
<div class="q_caption" style="margin: 5px; text-align: center; font-size: 12px; float: left;">
<#assign seen_users = seen_users + {online_user.@href:1} />
<#assign online_user_ranking = rest(online_user.@href + '/ranking').ranking />
<#assign avatar_info = restadmin(online_user.@href + "/profiles/avatar").image />
<li style="float:none!important;"><span class="UserName lia-user-name"> <img class="lia-user-rank-icon-left" title="${online_user_ranking.name}" alt="${online_user_ranking.name}"
src="${avatar_info.url}" style="max-width: 64px; max-height: 36px;" /> <a
class="lia-link-navigation lia-page-link lia-user-name-link"
style="<#if online_user_ranking.display.color != ''>color: #${online_user_ranking.display.color}</#if>"
target="_self" href="${online_user.@view_href}"><span class="<#if online_user_ranking.display.bold == 'true'>login-bold</#if>"><br />${online_user.login}</span></a></span>
</li>
</div>
</#if>
</#list>
</ul>
<div class="lia-view-all">
<a class="lia-link-navigation view-all-link" id="link_147" href="/t5/forums/usersonlinepage">View All Members Online</a>
</div>
</div>
</div>
</div>
</div>
<div class="lia-decoration-border-bottom">
<div>
</div>
</div>
</div>
</div> </div>
</div>