Positioning a background image within an <a> element

Question

This fiddle shows a close icon positioned next to some text in an <a> element (this is used to close a Bootstrap tab). The HTML looks like this:

<li class="active"><a data-toggle="tab" href="#tab1">Page 1<span class="closeIcon"></span></a></li> 

So there's a span immediately after the text, with a class of closeIcon, and the css sets a background image for the icon.

This works great for Firefox, Chrome, Safari, and Opera, but fails miserably for IE11 - the icon appears on the next line down. I haven't tried it for IE <11, but it presumably doesn't work there either.

Any idea how can I can fix this for IE? The CSS is:

.closeIcon {
  width:16px;
  height:16px;
  float:right;
  margin:2px -10px 0 4px;
  background:url('http://s21.postimg.org/jam8gpcr7/themes_windows_global_icons_close.png') 0 0;
}

Thanks.

Answer 1

Use the background shorthand to position the element and change the display to inline-block as opposed to than floating it.

Example Here

.closeIcon {
    width:16px;
    height:16px;
    margin:2px -10px 0 4px;
    display:inline-block;
    background: url('http://s21.postimg.org/jam8gpcr7/themes_windows_global_icons_close.png') -1px 4px / 64px 16px no-repeat;
}

The floating element was the culprit.