Background image of h tag being centered in IE

Question

Strange issue that I'm not exactly sure about...also, please feel free to correct me if I am going about the SEO incorrectly, as it is relatively new to me.

I have a few h3 tags that I am replacing with images to make them a bit prettier. I still have text in between the tags, but I have made the font-size 0 in hopes that the search spiders would still register them.

Naturally, everything looks fine in FF (ie the images are left-aligned), but in IE the images are centered, and I'm not exactly sure how to fix them. I had hoped that the background-position would take care of that, but it remains center-aligned.

**style.css**
h3 {
  font-size: 0px;
}

h3#provide {
  background: url('provide.png') no-repeat;
  background-position: top left;
  width: 234px;
  height: 38px;
}

.object_wrapper {
  margin: 10px auto 0px auto;
  padding: 10px;
  width: 400px;
}


**index.php**
<div class="object_wrapper">
  <h3 id="provide">h3 text</h3>
  <p>
    text text text
  </p>
</div>

Answer 1

Maybe the problem is caused by margin/padding. How about adding

h3#provide {
    margin: 0;
    padding: 0;
}

Answer 2

You showed only fragments of your CSS and HTML.

Don't forget that the DOCTYPE is important if IE is to behave in a more standard manner.

Answer 3

Combine your background and background-position attributes. I don't know if it will fix anything but it looks cleaner.

h3#provide {
  background: url('provide.png') no-repeat;
  background-position: top left;
  width: 234px;
  height: 38px;
}

Could (and should) be:

h3#provide {
  background: url('provide.png') no-repeat top left;
  width: 234px;
  height: 38px;
}

And maybe it's centering because of the auto-margin of the .object_wrapper. Seems unlikely, but maybe this plus Alexander's solution will fix it.