float being pushed below container

see my page at http://biteof.com/units_and_evidence/, in firefox everything is displaying perfectly. However in IE the "top" button which is supposed to be floated in开发者_如何学Cside the h2 called "Unit 301: Pre-production skills" floats to the right but is pushed outside of the heading.

Can anyone see why this would occur?

HTML:

<h2>
Unit 301: Pre-production skills
<a class="top" href="http://biteof.com/units_and_evidence/#top"/>
</h2>

CSS:

h2 {
  background:#235ec9 0 0;
  color:#ffffff;
  display:block;
  font-size:16px;
  height:40px;
  line-height:40px;
  margin:10px 0 10px -12px;
  padding-bottom:0;
  padding-left:10px;
  padding-right:10px;
  padding-top:0;
  text-indent:30px;
  width:880px;
  clear:both;
}
a.top:hover {
  background-position:0 -40px;
}
a.top {
  background-image:url(images/top.gif);
  background-position:0 0;
  display:block;
  float:right;
  height:40px;
  width:55px;
}

put the floated a on the left of the html code, like this:

<h2>
<a class="top" href="http://biteof.com/units_and_evidence/#top"/>
Unit 301: Pre-production skills
</h2>

I would assume it's your display:inline-block; on .top because IE doesn't support that property. What happens if you either change it to display:block; or just remove it?