IE7 CSS padding issue - cannot figure out

Trying to figure out a rather annoying IE7 CSS issue. For some strange reason on the page below, its padding is appearing to be much larger than normal. No properties I apply seem to fix the issue and I cannot figure out why it is happening. You can see the issue here on the buttons (the main culprit):

Example: http://www.matthewruddy.com/demo/?page_id=1088

Here is the CSS being applied:

.button {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  cursor: pointer;
  margin: 0;
  padding: 0;
  display: inline-block;
  white-space: nowrap;
}

.button span {
  margin: 0;
  padding: 8px 12px;
  display: inline-block;
  white-space: nowrap;
}

You can see the entire CSS here: http://pastebin.com/Grsxh97H

And the source of the webpage: http://pastebin.com/rW33Nh0D

Thanks to anyone who can shed some light on the issue, Matthew.

5
задан Hussein 15 February 2011 в 20:15
поделиться