I'm currently working on a CSS design that involves positioning an image within a span tag. Here's the CSS code I have:
.dc-mega-icon {
background-image: url(...);
display: inline-block;
position: absolute;
top: 18px;
width: 16px;
background-repeat: no-repeat;
display: inline-block;
height: 14px;
margin-left: 5px;
}
Here's the corresponding HTML:
<li class="liMenuItem" id="itemLogout">
<a href="#" class="menuItem dc-mega">
<span class="menuIcon"> </span>
My Profile
<span class="dc-mega-icon"></span>
</a>
<div class="sub-container non-mega">
<ul id="CCMenuOptions" class="sub" style="display: none;">
<li class="mySupport"><a href="#">Dashboard</a></li>
<li class="mySupport"><a href="#">My Support</a></li>
</ul>
</div>
</li>
When viewed in Firefox/IE, the arrow displays correctly:
However, when viewing it in Chrome, the arrow appears on the left overlapping the green icon:
What could be causing this issue? Interestingly, it seems to only occur in Chrome and not in other Webkit-based browsers like Opera or Safari.