IE 7 display issue with background image buttons

Question

At the very bottom of the page the three read more buttons aren't displaying correctly in IE 7. Why is this? I have tried everything!

http://tiny.cc/do1qr

.readmore {
  background-image: url("images/readmore-left3.png");
  display: block;
  float: right;
  height: 24px;
  margin-top: 10px;
}

.readmore a {
  background: url("images/readmore-right3.png") no-repeat scroll right center transparent;
  color: #414040;
  display: block;
  float: right;
  font-family: Arial;
  font-size: 11px;
  height: 21px;
  margin-right: -15px;
  padding: 3px 10px 0;
  text-shadow: 1px 1px 0 #FFFFFF;
}

Answer 1

Try using Strict instead of Transitional... transitional is not much better (if not the same as) quirks mode.

Answer 2

You may try the this. Set the display of a to inline-block ( you may need decrease the padding-top and bottom)

.readmore a {display:inline-block;}

Answer 3

If you add display: block on the a tag then that fixes your issue. Inline elements don't normally have vertical padding which is why it looks different in IE. You have to make it behave by changing it to a block level element. Adding display: block will fix it.