I'm having trouble finding a solution to a specific issue that seems to be only affecting Chrome. Whenever I try to replace the text in a span element, it causes the parent anchor to shift left. You can see a demonstration of this problem here: http://jsfiddle.net/Sj3Gj/2/. While I have simplified the HTML for clarity, I need to maintain this structure and CSS due to other requirements. Placing a float: left on the anchor fixes the issue, but it disrupts the positioning of the larger structure where it is located.
I'm stuck and not sure how to resolve this. In Chrome, the anchor floats left, while in Firefox and IE, everything appears fine. Any suggestions?
Below is the code snippet:
<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;
}