IE 7 display issue with background image buttons

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://tjonesandson.co.uk/

.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;
  margi开发者_如何学Pythonn-right: -15px;
  padding: 3px 10px 0;
  text-shadow: 1px 1px 0 #FFFFFF;
}

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;}

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.

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