HTML/CSS: Floating element in H2 element

Question

This is the HTML:

<h2>
  Log in
  <a onclick="doSomething()" href="#" class="float-right">&nbsp;</a>
</h2>

This is the CSS:

.float-right {
    float: right;
    background: url(img.png);
    width: 10px;
    height: 10px;
    text-decoration: none;
}

So this should make the .float-right element float to the right of the text in the header, but in IE7 it doesn't! I don't care about IE6, I just have to get this working in IE7 and newer.

Answer 1

try adding display:block; to the css

Answer 2

Have you tried to move the code around?

<h2>
  <a onclick="doSomething()" href="#" class="float-right">&nbsp;</a>
  Log in
</h2>

Answer 3

Is there a sample online we could see?