Changing text of a span moves parent element left - html

Question

I apologize if someone can immediately direct me to the right place, but I'm unsure what to even search for this particular problem. It seems to be a Chrome-specific bug, but I'm unsure how to fix it.
What's happening is that when I replace the text in a span, it's moving a (grand)parent anchor to the left. (see fiddle for demo : http://jsfiddle.net/Sj3Gj/2/) I've simplified the HTML, but for various reasons, this is the structure/CSS I need. If you put float: left on the anchor element, it works fine, but I have this structure in a larger and this additional float breaks the positioning of the larger structure.
I'm at a complete loss here. If you look at the fiddle in chrome, the anchor floats left, but in Firefox/IE, it's fine. Any ideas?
Here's my code:
<a class="trigger">
<div></div>
<span>Some text</span>
</a>
a.trigger {
width: 337px;
height: 16px;
padding: 2px 20px 2px 5px;
margin-top: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
a.trigger, a.trigger:link, a.trigger:visited {
display: inline-block;
border: 1px solid;
border-top-color: #BFD6F1;
border-left-color: #BFD6F1;
border-bottom-color: #9EBCE1;
border-right-color: #9EBCE1;
padding: 2px 18px 2px 7px;
background-color: #FFF;
text-decoration: none;
cursor: pointer;
}
div{
background-image: url('http://placekitten.com/200/300');
height: 16px;
width: 16px;
display: inline-block;
float: left;
}
a.trigger span {
margin-left: 10px;
}
a.trigger, a.trigger:link, a.trigger:visited {
cursor: pointer;
}

Answer 1

This is sbecause you are floating the div to the left. remove the float, it is not needed as you have already declared inline-block
DEMO http://jsfiddle.net/kevinPHPkevin/Sj3Gj/5/
div{
background-image: url('http://placekitten.com/200/300');
height: 16px;
width: 16px;
display: inline-block;
}