IE7 CSS padding issue - cannot figure out

Question

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.

thirtydot thirtydot · Accepted Answer · 2011-02-15T19:31:22

I've come across this one before.

Simply applying overflow: visible to your buttons will fix it.

I will try to find a reference link.

See:

http://jehiah.cz/a/button-width-in-ie

IE7 CSS padding issue - cannot figure out

1 Answers